/*
:root{
    --font-size:14px;
}
*/
#loading > span{
	color: #ffd051;
	font-weight:bold;
	font-size:4em;
	display: flex;
}
@keyframes move-text {
    0% { transform: translateY(0); opacity: 1; filter:brightness(1); }
    12% { transform: translateY(-0.2em); filter:brightness(10); }
    24% { transform: translateY(0); opacity: 1; filter:brightness(1); }
}
.follower.lower-row{

}
.ref{
	color: white;
    font-size: 0.75em;
}
#loading span span {
	will-change: transform;
	animation: move-text 2s;
	animation-iteration-count: infinite;
	letter-spacing:0.2em;
}
.healthBox{
	border-radius:0.1em;
	border: 1px solid #999;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	font-size:0.95em;
}
.healthTitle{
	padding: 0.3em;
	text-align: center;
	white-space: nowrap;
	line-height:1;
	color:white;
	font-size:0.9em;
}
.healthBar{
	width:100%;
	height:0.5em;
	background:#333;
}
.healthInner{
	background-color: #63d148;
	width:100%;
	height:100%;
}
#healthUI{
	pointer-events: none;
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index: 1;
	position: relative;
}
.ing-prog-wrap.green{
	border-color: #adffac !important;
}
.ing-prog-wrap.green .ing-prog{
	background: #adffac !important;
}
.ing-prog-wrap{
	width:100%;
	height:0.5em;
	border-radius: 0.2em;
	border:1px solid white;
	background:black;
	overflow:hidden;
}
.ing-prog{
	height:100%;
	background:white;
}
.hoverBox{
	position:fixed;
	transform: translate(-50%, -50%);
	padding:0.8em !important;
}
.recipe *{
	user-select: none;
}
.droptoggle .lni{
	display: flex;
	align-items: center;
	margin-right:0.5em;
}
.droptoggle i, .droptoggle p{
	pointer-events: none;
}
.droptoggle{
	cursor:pointer;
	display: flex;
	font-weight:700;
}
.dropdown{
	margin-left:1em;
}
.recipe{
	color:white;
	max-height: 100%;
    display: flex;
    flex-direction: column;
}
.recipe-inner{
	padding:0.5em;
	overflow-y:scroll;
	max-height: 100%;
    min-height: 1px;
}
.recipe .top-row{
	height:2em;
	padding-right:1em;
	border-bottom:1px solid white
}
.recipe-title{
	text-align: center;
	font-weight:600;
	display: flex;
    align-items: center;
}
.recipe-back{
	border-radius:0 !important;
	padding:0.4em !important;
    display: flex;
    align-items: center;
	border-top: 0 !important;
    border-left: 0 !important;
    border-bottom: 0 !important;
}
.recipe-back .lni{
	line-height:1;
}
.no-padding{
	padding:0 !important;
}
.coffeebeans{
	position:fixed;
	left:2em;
	top:38%;
}
.milk{
	position:fixed;
	left:2em;
	top:46%;
}
@media(max-width:1455px){
    :root{
		font-size:1.1vw;
    }
}
div[data-index="ring1"]{
	grid-column-start: 1;
}
div[data-index="ranged"]{
	grid-column-start: 2;
    grid-column-end: 5;
}
@media(min-width:1456px){
:root{
	font-size:1vw;
}
}
@media(max-width:1024px){
	.ad-test{
		left:6.5em !important;
	}
}

.channel{
	position: fixed;
	top:65%;
	left:50%;
	transform: translate(-50%, -50%);
	width:10em;
	height:1.5em;
	background:black;
	border-radius:0.5em;
	overflow:hidden;
}
.channel-inner{
	width:50%;
	height:100%;
	background:#77d4ff
}
.text-header{
	padding: 0.5em 1em;
	top:0.8em;
	left:1em;
	width:calc(100% - 2em);
	border-bottom:1px solid #222;
	color:#000;
	background:#ffedcd
}
.books-list-wrap{
	flex: 1 0 45%;
	min-width: 0px;
}
.ui-list.books-list{
	min-width: 0;
}
.books-list p{
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
}
.list-outer{
    overflow: hidden;
    flex: 1 0 auto;
    display: flex;
}
.texts-list .button.active,.books-list .button.active{
	background:white;
}
.texts-cats{
	display:flex;
	flex-wrap:wrap;
	gap:0.2em;
	padding:0.25em;
	border-bottom:1px solid #333;
}
.texts-cats .text-cat-chip{
	background:transparent;
	border:1px solid #222 !important;
	border-radius:0.8em;
	color:#000 !important;
	font-size:0.72em;
	padding:0.1em 0.7em;
	line-height:1.4;
}
.texts-cats .text-cat-chip.active{
	background:#fff;
}
.texts-cats .text-cat-chip:hover{
	background:#ffffff88;
}
.texts-sort{
	display:flex;
	gap:0.2em;
	padding:0.25em;
	border-bottom:1px solid #333;
}
.texts-sort .text-sort-btn{
	background:transparent;
	border:1px solid #222 !important;
	color:#000 !important;
	font-size:0.72em;
	padding:0.1em 0.6em;
	flex:1 1 0;
	line-height:1.4;
}
.texts-sort .text-sort-btn.active{
	background:#fff;
}
.texts-sort .text-sort-btn:hover{
	background:#ffffff88;
}
.texts-group-header{
	font-size:0.7em;
	font-weight:bold;
	letter-spacing:0.06em;
	text-transform:uppercase;
	color:#00000099;
	padding:0.5em 0.6em 0.15em;
	border-bottom:1px solid #00000033;
	margin:0;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.texts-list .button:hover,.books-list .button:hover{
	background:#ffffff88;
}
.texts-wrap .box-close img, .text-wrap .close img{
	filter: invert(1);
}
.texts-wrap{
	min-width: 28em;
    min-height: 25em;
	justify-content: stretch;
	width:23em;
	background: #ffd077 !important;
}
.text-wrap{
	    font-size: 1.1rem;
}
.task-wrap{
	min-width: 34em;
    min-height: 23em;
	justify-content: stretch;
	width:37em;
}
.task-types{
	margin-left:0.5em;
	margin-right:0.5em;
}
.task-types .active{
	background:white;
	color:black;
}
.task-list-wrap{
}
.task-desc-wrap{
	overflow:hidden;
}
.completed-title{
	padding:0.3em;
	margin-top:0.5em;
	font-size:1.1em;
}
.task-show{
	display: flex;
	position:absolute;
    left:1em;
    top:1em;
	align-items: center;
}
.task-overlay-none{
	display:none !important;
}
.task-show{
	cursor:pointer;
}
.radio{
	background:black;
	border-radius:0.2em;
	border: 1px solid white;
	color:black;
	width:1.5em;
	height:1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor:pointer;
	font-size:1.3em;
}
.radio.active{
	background:white;
}
.radio:hover{
	background:#aaa;
}
.task-show button{
	margin-right:0.6em;
	font-size:1em !important;
}
.row-button{
	border-radius:0em !important;
	border-top-width: 0px !important;
	border-left-width: 0px !important;
	border-right-width: 0px !important;
	text-align:left;
	font-size:1em !important;

}
.row-button.active{
	background-color: white;
	color:black;
}
.tasks{
	display:grid;
	grid-template-columns: 2fr 3fr;
	flex: 1 1 auto;
	gap:1em;
	padding:1em;
	padding-top:0em !important;
	min-height:1px;
}
.texts{
	flex: 1 0 auto;
    display: flex;
    margin: 1em;
    margin-top: 0em;
	border: 1px solid #222;
    border-radius: 0.4em;
}
.books-list-wrap{
	    background: #ffffff66;
}
.texts-list-wrap{
	flex: 1 0 55%;
	border-left:1px solid #333;
}
.task-list-outer{
	border:1px solid white;
	border-radius:0.4em;
	overflow: hidden;
	flex: 1 0 auto;
	display: flex;
}
.texts-list-outer{
	overflow: hidden;
	flex: 1 0 auto;
	display: flex;
}
.texts-list .button, .books-list .button{
	background:transparent;
	border-color: #222 !important;
	color:#000 !important;
}
.task-list,.texts-list{
	flex: 1 0 auto;
	overflow-y: scroll;
	max-height: none !important;
	margin-top:-1px !important;
}
/* The journal box is draggable/resizable: every level of the scroll chain
   must be allowed to shrink (flex-shrink + min-height:0), otherwise the
   fixed-height cats/sort rows push the lists past the clipped edge */
.texts{
	flex: 1 1 auto;
	min-height: 0;
}
.texts .texts-cats, .texts .texts-sort{
	flex: 0 0 auto;
}
.texts .books-list-outer, .texts .texts-list-outer{
	flex: 1 1 0;
	min-height: 0;
}
.texts .texts-list, .texts .ui-list.books-list{
	flex: 1 1 auto;
	min-height: 0;
}
.texts .ui-list.books-list{
	overflow-y: auto;
	max-height: none;
}
.tasks .desc-outer{
	border:1px solid white;
	border-radius:0.4em;
	flex: 1 1 auto;
	overflow: hidden;
	display: flex;
    flex-direction: column;
}
.tasks .desc{
	flex: 1 1 auto;
	overflow-y: scroll;
	padding:0.5em;
}
.task{
	display: flex;
	margin-right:0.5em;
	margin-bottom:0.5em;
	color:white;
	align-items: flex-start;
	font-size:0.9em;
}
.task .lni{
	padding:0.2em;
	border-radius:4em;
	border: 1px solid white;
	background:black;
	color:white;
	font-size:0.7em;
	margin-right:0.4em;
	margin-top:0.3em;
}
.task.true{
	color:#ffd051;
}
.task.true .lni{
	border: 1px solid #ffd051;
	background:#ffd051;
	color:black;
}
.task-overlay-wrap{
	pointer-events: none;
	position:fixed;
	bottom:9em;
	width:17em;
	right:1em;
	min-height:5em;
	text-align:left;
}
.task-title{
	font-size:1.2em;
	color:#ffd051;
	font-weight:bold;
}
.task-short-desc{
}
.ai-box .topbar{
	justify-content: space-between;
}

.error-text{
	padding-bottom:0em;
	color: #ffacc1
}
.title{
	font-size:0.9em;
	font-weight:bold;
}
.pink-noto{
	color: #ffacc1;
    background: #ffacc1;
    width: 1em;
    height: 1em;
    position: absolute;
    top: 0.8em;
    right: 0.8em;
    border-radius: 1em;
}
.pink-noto.big{
    top: -0.4em;
    right: -0.4em;
}
.deny p{
	text-align: center;
}
#auth-container.main{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#auth-container.main h2{
	text-align: center;
	padding-bottom:1em;
	font-size:2.6em
}
.login-wrap{
	position: fixed;
	z-index: 10000000;
	top: 0;
	bottom:0;
	left:0;
	right:0;
	background: black;
	display: flex;
	justify-content: center;
	align-items: center;
}
.gray{
	color:#999 !important;
}
.server-btn.active{
	background: #ffacc1;
	border: 1px solid #ffacc1;
	color:black;
}

.servers{
	overflow-y: scroll;
    overflow-x: hidden;
	flex: 1 0 auto;
}
.server-list{
	z-index:100000;
	height:30em;
	top:50%;
	transform: translateX(-50%) translateY(-50%) !important;
}
.upper-bar-wrap .stat{
    line-height: 1.3;
}

.stat.active{
	background:#222;
}
.stat{
	padding: 0.3em 0.7em;
	border-radius:1em;
	cursor: pointer;
	color:white;
}
.stat .row2{
	align-items:center;
}
.stat .lvl{
	flex: 0 0 1.2em;
}
.stat .statLvl{
	flex: 0 0 1.2em;
}
.stat .amount{
	height:100%;
	background:white;
	width:0;
}
.stat .bar{
	overflow:hidden;
	flex: 1 1 90%;
	height:0.5em;
	border:1px solid white;
	border-radius:0.3em;
}
.stats{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6em;
	padding:2em;
}
.stat .row{
	padding-bottom:0em;
	pointer-events: none;
}
.inv-wrap .lni{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.followers{
	display: grid;
	gap: 1em;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	padding:0em 1em;
}
.follower-box{
	width:2em;
	height:2em;
	display: flex;
	align-items: center;
	justify-content: center;
	border:1px solid white;
	border-radius:0.3em;
	margin:0.5em;
}
.follower-box img{
	padding:0.3em;
}
.follower-box.active{
	border:1px solid #ffd051;
	cursor:pointer;
}

.homepage{
	display: flex;
	flex-direction: column;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background: #000000a1;
	justify-content: space-between;
}
.homepage .play-button{
	padding: 0.5em 1em;
	font-size:2em;
	color:black;
	background: #ffd051;
	border-radius:0.3em;
	border: 0px;
	max-width:16em;
	min-width:16em;
	margin:auto;
	margin-top:2em;
	margin-bottom:2em;
	font-weight:700;
	transition: all 0.2s ease;
	outline: 0px solid white;
	outline-offset: 0em;
	cursor:pointer;
}
.homepage .play-button:hover{
	background:white;
	outline: 0.15em solid white;
	outline-offset: 0.2em;
}
.homepage .game-title{
	padding:2rem;
	padding-bottom:0rem;
}
.char-select{
	display:flex;
	justify-content: space-between;
	padding:4em;
}
.char-slot{
	background:#ffd47533;
	border-radius:0.4em;
	border: 1px solid #ffffff55;
	transition:all 0.3s ease;
	transform: translateY(0);
	cursor:pointer;
	width:18em;
	height:18em;
	display: flex;
    justify-content: center;
    align-items: center;
	color: #ffd475;
	outline: 0px solid #ffd475;
    outline-offset: -0.1em;
	flex-direction:column;
}
.char-slot.empty{
	background:#ffffff22;
}
.char-slot.selected{
	outline: 0.3px solid #ffd475;
    outline-offset: 0.3em;
}
.char-slot canvas{
	width:12em;
	height:12em;
	image-rendering: pixelated;
}
.char-slot:hover{
	background:#ffd47555;
	transform: translateY(-0.2em);
}
.char-slot.selected{
	background:#ffd47555;
	outline: 0.4em solid #ffd475;
    outline-offset: 0.35em;
}
.char-slot.empty:hover{
	background:#ffffff55;
	transform: translateY(-0.2em);
}
.char-slot .slot-ind{
	font-size:10em;
	color: #ffffff66;
}
.char-slot .char-name{
	font-size:1.8em;
	font-weight: bold;
	margin:0.6em;
}
.make-close-btn, .premium-close-btn{
	position: absolute;
	right:0.2em;
	top:0.2em;
	border-radius:4em;
	width:1.6em;
	height:1.6em;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight:700;
	transition: all 0.2s ease;
	background:transparent;
	cursor:pointer;
	color:white;
	font-size:1.5em;
}
.premium-close-btn{
	font-size:1em;
}
.make-close-btn:hover,.premium-close-btn:hover{
	background: #ffffff33;
}
.char-make{
	pointer-events: all;
	position:relative;
	z-index:3;
}
.char-make .left-wrap{
	display: flex;
	flex-direction: column;
	align-items: center;
	flex:1;
}
.world-select{
	display: none;
}
.signs-wrap{
	display: grid;
	gap:0.4em;
	grid-template-columns: 1fr 1fr 1fr;
	width:100%;
	flex-basis: 130%;
}
.sign-desc{
	color:white;
	padding:0.3em;
	width:100%;
	    margin-bottom: auto;
		padding:0.5rem;
		background-color:#05182e77;
		border-radius:0.3em;
}
.inner-chat *{
	font-size:clamp(14px, 1rem, 16px);
}
.sign-button{
	padding: 0.3em 0.75em;
    background: black;
    border: 1px solid white;
    color: white;
    border-radius: 0.35em;
    font-size: 1em;
    cursor: pointer;
}
.sign-button:hover{
	background-color: white;
	color:black;
}
.sign-button.selected{
	background-color: #ffd051;
	border-color: #ffd051;
	color:black;
}
.char-name-error{
	color:rgb(223, 114, 114);
	opacity:0;
}
.game-input{
	pointer-events: all;
	font-size:1.5em;
	padding:0.5em;
	text-align: center;
	background-color: transparent;
	border:0px;
	color: #ffd475;
	border-bottom:2px solid #ffd475;
	border-radius:0px;
}
.game-input::placeholder{
	color: #ffd3757e;
}

.lock{
	z-index: 10;
	display: flex;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom: 0;
	justify-content: center;
	align-items: center;
}


.friend-wrap .active{
	background: #ffacc1;
	border:1px solid #ffacc1;
	color:black;
}
#deny-wrap{
	z-index:1200000;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#070707;
	color: #ffd051;
	display: none;
	align-items: center;
	justify-content: center;
}
#deny-wrap p{
	font-size: 1.3em;
}
.deny{
	width:40em;
}
.ad-test{
	width:320px;
	height:50px;
	background:red;
	position:fixed;
	top:1em;
	left:8em;
	z-index:10000
}
.mini-menu.scores .highscores{
	max-height:35em;
}
.mini-menu.scores .score-list{
	overflow-y: scroll;
}
.top-padding{
	padding-top:1em;
}

.z2{
	z-index:2;
}
body{
    
  font-size: var(--font-size);
}
body b{
    font-weight:bold;
}


/* NEW STUFF */
@keyframes dingback{
	0% {transform:translateX(-20%);}
	45% {transform:translateX(100%);}
}
@keyframes ding {
	0% {
		height:0em;
	}
	100% {
		height:3em;
	}
}
@keyframes dingr {
	00% {
		height:3em;
	}
	100% {
		height:0em;
	}
}
@keyframes dingtext {
	0% {
		left:0%;
		transform: translateX(-50%);
		animation-timing-function: linear;
	}
	20% {
		left:40%;
		transform: translateX(-30%);
		animation-timing-function: linear;
	}
	84% {
		left:40%;
		transform: translateX(30%);
		animation-timing-function: linear;
	}
	100% {
		left:130%;
		transform: translateX(100%);
		animation-timing-function: linear;
	}
}
.dingtext{
    animation: dingtext 2.2s forwards;
}
.dinganim{
    animation: ding 0.7s forwards;
}
.dinganimreverse{
    animation: dingr 0.7s forwards;
}
#ding.green .strip{
	color:#7aff75;
}
#ding.blue .strip{
	color:#75d3ff;
}
#ding .strip p{
	position:absolute;
	transform: translateX(-100%);
	max-width:8em;
	line-height:1.2;
}
#ding .strip{
	background:black;
	text-align: center;
	font-size:4em;
	color:#ffd475;
	font-weight:bold;
	overflow:hidden;
	position:relative;
	display: flex;
	align-items: center;
	flex:1 0 100%;
}
#ding .strip.dinganim:after {
    content: '';
    top: 0;
    transform: translateX(100%);
    width: 200%;
    height: 200%;
    position: absolute;
    z-index: 1;
    animation: dingback 5s;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, #ffd475 1%,#ffd475 24%,rgba(128,186,232,0) 25%,rgba(125,185,232,0) 100%);
}

#ding.green .strip.dinganim:after{
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, #7aff75 1%,#7aff75 24%,rgba(128,186,232,0) 25%,rgba(125,185,232,0) 100%);
}
#ding.blue .strip.dinganim:after{
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, #75d3ff 1%,#75d3ff 24%,rgba(128,186,232,0) 25%,rgba(125,185,232,0) 100%);
}
#ding .strip.dinganimreverse:after {
    content: '';
    top: 0;
    transform: translateX(100%);
    width: 200%;
    height: 200%;
    position: absolute;
    z-index: 1;
    animation: dingback 5s;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, #ffd475 1%,#ffd475 24%,rgba(128,186,232,0) 25%,rgba(125,185,232,0) 100%);
}
#ding{
	pointer-events: none;
	position: fixed;
	top:50%;
	left:0;
	right:0;
	bottom:0;
	background: #00000055;
	background: transparent;
	display: flex;
	align-items:center;
	justify-content: stretch;
	z-index:11;
}
.gold .button{
	border: 1px solid #ffd475;
	color: #ffd475;
}
.gold .pointer-to{
	border: 1px solid #ffd475;
}
.gold:hover .button,.gold:hover .pointer-to{
	background: #ffd475;
}
@keyframes slide {
	0% {transform:translateX(-150%);}
	100% {transform:translateX(100%);}
}
.shine:after {
    content: '';
    top: 0;
    transform: translateX(100%);
    width: 200%;
    height: 100%;
    position: absolute;
    z-index: 1;
    animation: slide 1.8s infinite;
    background: linear-gradient(-80deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 9%,#ffd475 10%,#ffd475 24%,rgba(128,186,232,0) 25%,rgba(125,185,232,0) 100%);
}
.shine{
	position: relative;
	overflow:hidden;
}
.emitter{
    position: fixed;
    display: inline;
    background: black;
    padding-left:0.3em;
    padding-right:0.3em;
    font-size:1.2em;
}
.bar-hover{
    background: #ffffffbb;
    padding-left:0.4em;
    padding-right:0.4em;
    color:black;
    position:absolute;
    border-radius:1em;
    left: 50%;
    transform: translateX(-50%);
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
#social-box,.noto{
	pointer-events: none;
}
.user-row,.friend-row{
    padding-top:0.4em;
    padding-bottom:0.4em;
    border-bottom:1px solid #666;
}
.friend-row{
	opacity:0.7;
}
.friend-row.online{
	opacity:1;
}
.members .user-row:first-child,.friend-row:first-child{
    padding-top:0em;
}
.group-options{
    margin-top:auto;
}
.friendlist{
    flex:1 1 25em;
}
.tabbutton{
	border-bottom-left-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
	border-bottom:0px !important;
}
.none{
	display:none !important;
	pointer-events: none !important;
}
.friends,.groups{
	flex: 1 1 100%;
	overflow-y: scroll;
	border-top-left-radius: 0px !important;
	border-color: #ffacc1 !important;
}
.invite-box{
	border-color: #ffacc1 !important;
}
.invite{
	padding-top:0.4em;
}
.invite .ui-row{
	font-size: 0.7em;
    padding-top: 0.8em;
    padding-bottom: 1.2em;
    border-bottom: 1px solid white;
}
.button.greenbutton{
	border-color: #adffac;
	color: #adffac;
}
.button.greenbutton:hover{
	background: #adffac;
}
.green{
	color: #adffac;
}
.simpleYellow{
	color: #ffd051 !important;
}
.lightRed{
	color: #f17d6d;
}
.greenbutton button{
	border-color: #adffac;
	color: #adffac;
}
.greenbutton button:hover{
	background: #adffac;
}
.group,.friend,.trade{
	position:relative;
}
.success-overlay{
	padding: 0.4em 0.9em;
	opacity:0;
	position:absolute;
	background:white;
	color:black;
	display: flex;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-weight: 600;
	transition: all 0.2s ease;
}
.success-overlay i{
	flex: 0 0 15%;
	padding-top:0.1em;
	font-weight:900 !important;
	margin-right:0.4em;
}
.friendlist{
	transition: all 0.2s ease;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: stretch;
	height:25em;
}
.friends::-webkit-scrollbar-track,.groups::-webkit-scrollbar-track,.invite-box::-webkit-scrollbar-track {
	background: transparent;
}
.invite-box{
	height:10em;
	transition: all 0.2s ease;
	overflow-y:scroll;
}
.minified .friendlist{
	height:0em;
	padding:0em;
	border:0px;
	margin:0px;
	overflow:hidden;
    flex:1 1 0px;
}
.minified .controls{
	margin-bottom:0px;
}
.minified .invite-box{
	height:0em;
	padding:0em;
	border:0px;
	margin:0px;
	overflow:hidden;
}

.margin-top{
	margin-top:1em;
}
.margin-bottom{
	margin-bottom:1em;
}
.friend-wrap{
	position: fixed;
	right:1em;
	bottom:4em;
	z-index:13;
    max-height: 75vh;
	
    width: 17em;
}
.account-wrap{
	padding-top:3.3em !important;
}
.account-wrap .account{
	padding-bottom:2em;
}
.account-wrap .username{
	height:1.5em !important;
	font-size:1.4em;
}
.account-wrap .username p{
	
	margin-right:1em;
}
.white-hover:hover{
	background:white;
	color:black;
}
.username input{
	border:1px solid white;
	border-top-left-radius: 0.5em;
	border-bottom-left-radius: 0.5em;
	background:black;
	color:white;
	padding:0.4em;
}
.titles{
	display: flex;
	flex-direction: column;
    align-items: flex-start;
}
div p.player-title{
	padding:0.5em;
	display: inline-block;
	line-height: 0.4;
	border-radius:1em;
	border: 1px solid #eee;
	background: #eee;
	color:black;
}
.title-picker{
	margin-top:0.4em;
}
.player-title.Singular{
	background-image: linear-gradient(135deg, #ffdb63, #ffdb63 50%, #ff9292 50%, #ff9292);
	color:black;
	border-color: #ffdb63;
	font-weight:bold;
}
.player-title.Rare{
	background: #77d4ff;
	color:black;
	border-color: #77d4ff;
}
.player-title.Legendary{
	background: #adffac;
	color:black;
	border-color: #adffac;
}
.player-title.Mythical{
	background: #ffdb63;
	color:black;
	border-color: #ffdb63;
}
.player-title.Protolithic{
	background: #ff7bbd;
	color:black;
	border-color: #ff7bbd;
}
.column{
	display:flex;
	flex-direction: column;
	align-items:flex-start;
}


/*FOllowers*/
.followers-el{
	padding:0.5em !important;
	width:40em;
	z-index: 2;
}
.follower{
	display: flex;
	flex-direction: column;
	border-radius:0.3em;
	border: 1px solid #eee;
}
.follower .top-row{
	padding:1.2em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom:1px solid #bbb;
}
.follower .lower-row{
	padding:1.2em;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap:1.5em;
}
.follower .divider{
	width:100%;
	height:1px;
	background:#666;
	margin-top:0.6em;
	margin-bottom:0.6em;
}
.follower .xp-bar{
	width:auto;
	border: 1px solid #ffd051;
	height:0.5em;
	background:black;
	border-radius:1em;
}
.follower .xp-bar-inner{
	height:100%;
	background:#ffd051;
}
.follower canvas{
	width:100%;
	image-rendering: pixelated;
}


.edit-text{
	display: flex;
}
.edit-text button{
	color:white;
	cursor:pointer;
	background:transparent;
	border-top-right-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
}
.sign-in img{
	width: 1em;
    object-fit: contain;
    margin-right: 0.6em;
}
.sign-in,.sign-out,.back-to-homepage,.recall-to-hub{
	font-size: 1.1em;
    padding: 0.6em 1em;
    background: black;
    color: white;
    border: 1px solid white;
    border-radius: 0.3em;
    cursor: pointer;
	min-width: 15em;
	margin-bottom:1em;
}
.sign-in:hover img{
	filter: brightness(0);
}
.sign-in:hover,.sign-out:hover,.back-to-homepage:hover,.recall-to-hub:hover{
	background:white;
	color:black;
}
.highscores{
	flex-direction: column;
	color: white;

}
.highscores .score-box{
	display: flex;
	min-width:15em;
	padding-bottom:0.7em;
	padding-top:0.7em;
	border-top:1px solid white;
	justify-content: space-between;
	font-size:1.2em;

}
.highscores .score-box:first-child{
	border-top:0px !important;
}
#auth-container{
	width: 100% !important;
	display: flex;
    flex-direction: column;
}

.slot > .custom-icon{
	opacity:0.6;
}
p.bg{   
	top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1em;
	padding:0.3em;
	position:absolute;
	border-radius:5px;
	opacity:0.6;
	pointer-events:none;
    padding-left: 0.4em;
}
.custom-icon{
	padding:0.3em;
	position:absolute;
	border-radius:5px;
}
.invert{
	filter: invert(100%);
}
.inner:hover img{
	background:white !important;
}
.inner:hover .lni{
	background:black !important;
	filter: invert(100%);
}
.hbox.box{
	background: #181818;
	color:white;
	position:absolute;
	top: 50%;
    left: 50%;
	z-index: 30;
	min-width:11em;
	font-size:1.2em;
	display: flex;
	flex-direction: column;
	line-height:1.2;
	pointer-events: none !important;
}
.char-wrap{
	display: flex;
	width:100%;
	justify-content: flex-start;
	padding-bottom:1.5em;
	margin-bottom:1.5em;
}
.armor{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	align-items: center;
}
.slot-smaller{
	font-size:1em;
	margin:0.4em !important;
}
#char-canvas{
	width:8em;
	height:8em;
	image-rendering: pixelated;
}
#noto-box{
	position:fixed;
	left:1em;
	bottom:12em;
	width:12em;
	z-index: 11 !important;
}
.coords{
	position:fixed;
	right:4em;
	bottom:19em;
	width:12em;
	z-index: 11 !important;
	color:white;
	padding:0;
}
.padding{
	padding:1em !important;
}
#social-box{
	position:fixed;
	right:4em;
	bottom:8em;
	width:12em;
	z-index: 11 !important;
}
#help-wrap{
	position:fixed;
	pointer-events: none;
	top:0;
	bottom:0;
	left:0;
	right:0;
	display: flex;
	align-items:center;
	justify-content: center;
}
#inner-help-wrap{
	max-width: 38em;
	max-height: 30em;
	margin:4em;
	border-radius:1em;
	background:black;
	border: 1px solid white;
	overflow:clip;
	display: none;
	pointer-events:all;
	position:relative;
}
.help{
	padding:1.5em;
	color:white;
	overflow-y: scroll;
}
.help h1{
	color:#ffd051;
	font-weight:bold;
}
.help h2{
	line-height: 1.1;
	color:#ffd051;
	font-weight: bold;
	font-size:1.5em;
}
.noto{
	background:black;
	padding:0.8em;
	border-radius:5px;
	border:1px solid white;
	width:100%;
	margin-top:1.5em;
	color:white;
	transition:all 0.5s ease;
	transform:translateY(100%);
	z-index: 12 !important;
	font-size:0.9em;
	line-height:1.2;
}
.noto p{
	font-size:1.2em;
}
.row-pad{
	padding:0.4em;
}
.button.smallbutton{
	font-size:0.8em;
	padding: 0.4em 0.9em;
}
.inv-num{
	position: absolute;
    bottom: -10px;
    right: -10px;
    color: white;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 3px 4px 5px;
    line-height: 0.6;
    border-radius: 5px;
    border: 1px solid white;
    font-size: 0.9em;
}
.bank{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	padding:0em 1em 1em;
	max-height:30em;
	overflow-y: scroll;
	z-index: 2;
}
.bank-temp{
	z-index: 1;
}
.trade{
	display: flex;
}
.myTradeWrap, .theirTradeWrap{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	padding:0em 1em 1em;
	z-index: 2;
}
.myTradeWrap{
	border-right:1px solid #666 !important;
}
.inv{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	padding:0em 1em 1em;
}
.inv-wrap{
	align-items:flex-start;
	font-size: 0.92em;
	display: grid !important;
    grid-template-columns: 1fr 1fr;
}
.small-wal{
	margin: 1em 1.5em;
	padding:0.3em 1em;
	border-radius:5px;
	background:#161616;
	font-size:1em;
}
.slot.active{
	border:1px solid white;
	cursor:pointer;
}
.slot.active:hover{
	border:1px solid white;
	cursor:pointer;
}
.slot .inner{
	flex: 1 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius:5px;
	background:#202020;
}
.slot.active:hover .inner{
	background:white;
}
.slot i{
	color:white;
    font-size: 1.5em;
}
.slot.active:hover i{
	color:black;
}
.bold{
	font-weight:700;
}
.slot{
	width:3em;
	height:3em;
	border:1px solid #ffffff88;
	border-radius:5px;
	margin:0.5em;
	display: flex;
	justify-content: stretch;
	align-items: stretch;
	position:relative;
}
.pad-x{
	padding-left:2em;
	padding-right:2em;
}
.topbar{
	padding: 0.5em;
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid #ffffff55;
    background: #05182e;
}
.topbar i{
	cursor:pointer;
	
}
.shop-box .cats{
	margin-right:1.2em;
}
.shop-buy{
	border-top-right-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
}
.button.smallbutton.shop-cat{
	border-radius:0px;
	border-left:0px;
}
.button.smallbutton.shop-cat:first-child{
	border-top-left-radius: 0.4em;
	border-bottom-left-radius: 0.4em;
}
.button.smallbutton.shop-cat:last-child{
	border-top-right-radius: 0.4em;
	border-bottom-right-radius: 0.4em;
}
.shop-buy.active,.shop-cat.active{
	background:white;
	color:black;
}
.shop-sell.active{
	background:white;
	color:black;
}
.shop-sell{
	border-top-left-radius: 0px !important;
	border-bottom-left-radius: 0px !important;
}
.line.me{
	opacity:0.7;
}
.line.me b{
	color:#adffac !important;
}
.chat .line .me{
	color:#adffac !important;
}
.lootbox{
	height:14em;
	justify-content: space-between;
}
.loot-list{
	display: flex;
	flex-direction: column;
}
.active-ui{
	pointer-events: all;
}
.col{
	display: flex;
	flex-direction:column;
}
.box{
	color:white;
}






/* OLD STUFF */

.pink{
	background: #ffacc1 !important;
	color:black !important;
}
.mt{
	margin-top:0.5em;
}
.mt2{
	margin-top:1em;
}
.mb{
	margin-bottom:0.5em;
}
.mr{
	margin-right:0.5em;
}
.lobbies{
	display: flex;
	flex-direction: column;
	align-items: space-between;
	color:white;
}
.lootbutton{
	padding:0.6em;
	font-size:1em !important;
	border-radius:0px !important;
	text-align: left !important;
}
.ui-list{
	display: flex;
	flex-direction: column;
	max-height:20em;
	min-width:13em;
	align-items: stretch;
}
.lobby{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: white;
	min-width:250px;
}
.ui-row{
	display: flex;
	flex-direction:row;
	justify-content: space-between;
}

button.gold{
    color:#ecc900 !important;
	border: 1px solid #ecc900 !important;
}
button.gold:hover{
    color:black !important;
	background: #ecc900 !important;
	border: 1px solid #ecc900 !important;
}
.yellow{
    color:#ecc900;
    font-weight:600;
}
.rare, .rare *{
	border-color: #ffd051 !important;
	color: #ffd051 !important;
}
.rare:hover{
	background: #ffd051 !important;
}
.rare:hover *{
	color: black !important;
}
.rarity{
	margin-top: auto;
    text-align: center;
    font-size: 0.9em;
}

.pointer-to{
	background:black;
	width:2px;
	height:10px;
	border: 1px solid white;
	border-top: none !important;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
    position: absolute;
    left: calc(50% - 2px);
    transform: translatey(-1px);
}
.ten{
    max-width: 10em;
}
.white{
	background:white !important;
	color:black;
}
.chat-input{
    width: 10em;
}
.ai-input textarea, .ai{
	padding:0.5em 1em;
	text-align: left;
}
.ai-input textarea{
	width:100%;
	height:100%;
}
.ai-input textarea{
	background:transparent;
	resize:none;
	color:white;
	font-size:1em;
	display: flex;
	align-items: center;
}
.chat-input textarea{
	background:transparent;
	resize:none;
	color:white;
	font-size:1em;
	text-align:center;
	display: flex;
	align-items: center;
}
.chat-input textarea::placeholder, .ai-input textarea::placeholder{
	color:#bbb;
}

.chat-input textarea:focus, .ai-input textarea:focus{
	outline:none;
	border:none;
}

#gameUI button{
	pointer-events: all;
}
#gameUI .active-ui:hover{
	z-index:1;
}
#gameUI .active-ui:hover .pointer-to{
	background:white;
}


#gameUI{
	pointer-events: none;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:2;
}

#mini{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
	pointer-events: none;
}
#raw{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
	display: flex;
    align-items: center;
	pointer-events: none;
}
#raw canvas{
	width:100%;
	image-rendering: crisp-edges;
	pointer-events: none;
}
.char-make{
	width:38em;
	height:auto;
}
.premium-box{
	color:white;
	font-size:2em;
}
.char-make, .premium-box{
	padding:1.5em;
	position:fixed;
	bottom:50%;
	left:50%;
	transform: translate(-50%, 50%);
	background: #05182e;
	border-radius:0.7em;
	border: 1px solid white;
	display: flex;
	flex-direction: column;
	align-items:center;
	z-index: 60
}
.char-make-cols{
	display: flex;
	gap: 1em;
	    align-self: stretch;
		padding:1em;
		background: #ffffff22;
		border: 1px solid #ffffff44;
		border-radius:0.8em;
		    align-items: center;
	flex:1;
	margin-bottom:1em;
}
.mini-menu, .rogue-menu{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index:12
}
.rogue-menu{
	background:rgba(0,0,0,0.3);
	display: none;
}
.mini-menu > .button{
    margin-bottom:1em;
}
.mini-menu > .button:last-child{
    margin-bottom:0em;
}
.button{
    padding:0.5em 1em;
    background:black;
    border: 1px solid white;
    color:white;
    border-radius:0.4em;
    font-size:1.2em;
    cursor: pointer;
}
.button:hover{
    background:white;
    color:black;
}
.mini-box .title{
	min-height:auto !important;
	padding-bottom:1.5em;
}
#text-window{
    position:fixed;
    bottom:20%;
    display:flex;
    background:black;
    border: 1px solid white;
    color:white;
    border-radius:0.4em;
    font-size: clamp(14px, 1rem, 16px);
	max-width: 25em;
	overflow:hidden;
	max-height:50%;
}
#text-window .text-window-inner{
	pointer-events:auto;
	overflow-y:scroll;
    padding:0.5em 1em;
}
#text-window .text-window-inner *{
	pointer-events:none;
}
.text-window-inner .more{
	pointer-events: all;
}
.sell-amount{
	background:black;
	border-radius:0.3em;
	border: 1px solid white;
	width:2em;
	margin-right:1em;
	font-size: 1em;
    padding: 0.3em 0.6em;
}
.right{
	justify-content: flex-end;
}
.buy-button, .sell-button{
	font-size:0.8em;
}
button.buy-button .yellow{
	color: #ecc900;
}
.buy-button:hover .yellow{
	color:black;
}
.buy-button:hover, .sell-button:hover{
	color:black !important;
}
.i-button .lni{
    display: flex;
    align-items: center;
    justify-content: center;
}
.padding-top{
	padding-top:1em;
}
.two-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:1em;
}
.action-button{
	pointer-events: all;
}
.small{
	font-size:0.8em;
}
.blur{
}
.non-bold{
	font-weight:400 !important;
}
canvas{
    -webkit-transition : -webkit-filter 1500ms ease;
    filter:blur(0px) contrast(1.3) !important;
}
.text-wrap{
	box-shadow: 1px -1px 22px 0px rgba(0,0,0,0.17) inset;
-webkit-box-shadow: 1px -1px 22px 0px rgba(0,0,0,0.17) inset;
-moz-box-shadow: 1px -1px 22px 0px rgba(0,0,0,0.17) inset;
color: #000 !important;
background: #ffedcd !important;
border: 1px solid black !important;
padding:0em !important;
width:25em;
height:36em;
overflow: hidden;
}
.pass-close{
	top:0.3em !important;
	right:0.3em !important;
}
.pass{
	min-width:18em;
	min-height:3.5em;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	position:fixed;
	top:50vh;
	left:50vw;
	transform: translate(-50%, -50%);
	font-size:0.9em;
	padding:1em;
}
.pass .pass-btn{
	font-size:1em !important;
}
.pass input{
	background:transparent;
	font-size:1em;
	border:1px solid white;
	color:white;
	padding:0.5em 1em;
	margin-right:1em;
	border-radius:0.4em;
}
.text-wrap .text-outer{
    padding: 1em;
    box-sizing: border-box;
	flex: 0 1 100%;
    min-height: 1px;
}
.text-wrap .text{
	height:100%;
overflow-y: scroll;
padding-right: 1.4em;
box-sizing: border-box;
}
.texts-title{
	font-size:1.4em !important;
	font-weight:800;
}
.texts-sub{
	font-weight:800;
	margin-bottom:0.5em;
}
.lootbox, .playerbox{
    background: black;
    border-radius: 5px;
    border: 1px solid #ddd;
}
.playerbox p{
	color: white;
	padding: 0.5em;
}
.time:hover,.ping:hover{
    background:#ddd;
    color:black;
}
.time,.ping{
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    background: black;
    padding: 0px 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    color:#ddd;
    min-width:1em;
    display: flex;
    justify-content: flex-end;
}
.ping{
	right:unset;
	left:20px;
}

.line b{
    color: #ffacc1;
}
.dialog-wrap{
    box-sizing: border-box;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    pointer-events:none;
    z-index:2;
    -webkit-transition: -webkit-filter 500ms ease;
    -webkit-filter:blur(0px);
}
.doption{
    transition:all 0.2s ease;
    color:#eee;
    display:flex;
    align-items:center;
    padding-bottom:0.4em;
}
.doption i{
    margin-left:-0.1em;
    margin-right:0.6em;
    transition:all 0.2s ease;
    color:#eee;
    font-size:0.9em;
    padding-top:0.1em;
}
.doption:hover i{
    color: #ffacc1;
    margin-right:0.4em;
    margin-left:0.2em;
}
.doption:hover{
    color: #ffacc1;
}
#char2-canvas{
	display: none;
	width:7em;
	height:7em;
	image-rendering: pixelated;
	margin-bottom:1em;
}
#item-canvas{
	width:7em;
	height:7em;
	image-rendering: pixelated;
	margin-bottom:1em;
}
#char3-canvas, #make-canvas{
	width: 18em;
    height: 13.5em;
	image-rendering: pixelated;
}
.selects{
	display: flex;
	flex-direction: column;
	font-size:0.7em;
	flex:1;
}
.selector .label{
	font-weight:bold;
}
.char-make .submit{
	border: 1px solid white;
	background:white;
	color:black;
	padding: 0.7em 0.3em;
	cursor:pointer;
	font-size:1.3em;
	font-weight:bold;
	border-radius:0.7em;
	min-width:15em;
}
.char-make .submit:hover{
	background:black;
	color:white;
}
.selector{
	display: flex;
	color: white;
	flex-direction: column !important;
	align-items: center;
	font-size:1.6em;
}
.selector .row{
	width:12em;
}
.selector button{
	background: transparent;
	color:white;
	font-size:1em;
	appearance: none;
	border: none;
	cursor: pointer;
}
.area-clue{
	top:5em !important;
	display: none;
	padding: 0.3em 0.8em !important;
	color: white;
	font-size: 0.9em;
}
.shop-box{
    width:34em;
    height:18em;
    background:#000d1d;
    border:1px solid #aaa;
    border-radius:8px;
    pointer-events:all;
    transition:opacity 0.2s, padding 0.2s ease, filter 0.3s ease;
    color:#eee;
    box-sizing: content-box;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    position:fixed;
    font-size:1.1em;
    bottom:50px;
    filter:blur(0px);
}
.shop-box .currency{
	margin-right: 1.8em;
}
.shop-box .right-pane, .shop-box .sell-right-pane{
	flex: 1 0 50%;
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: center;
}
.shop-box .description, .shop-box .sell-description{
	padding:0.6em;
	color:white;
	flex: 0 1 100%;
	box-sizing: border-box;
	overflow-x:hidden;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	align-self: stretch;
}
.shop-box .description *, .shop-box .sell-description *{
	color:white;
}
.shop-box .item-button{
	padding:1em;
	font-size:0.9em;
	cursor:pointer;
	border:0px;
	background:transparent;
    border-bottom:1px solid rgba(255,255,255,0.3);
	text-align: left;
	color:white;
}
.shop-box .item-button:hover{
	background-color:rgba(255,255,255,0.07);
}
.shop-box .item-button.active{
	background:white;
	color: black;
}
.shop-box .shop{
    display:flex;
    flex-direction:row;
    min-height:14em;
    border-bottom:1px solid rgba(255,255,255,0.3);
    overflow-y:hidden;
	overflow-x:hidden;
}
.shop-box .items, .shop-box .sell-items{
	background-color:rgba(255,255,255,0.05);
    border-right:1px solid rgba(255,255,255,0.3);
	flex: 0 0 50%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	overflow-y: scroll;
}
.inner-chat{
	display: flex;
	flex: 1;
	min-height:0;
}
.inner-chat .users{
	flex: 1;
}
.inner-chat .chat-wrap{
	flex: 1 1 66%;
	display: flex;
	flex-direction: column;
    align-items: stretch;
}
.inner-chat .chat-input{
	width:auto;
	flex: 1 1 5rem;
}
.date{   
	font-size: 0.8em;
    padding-left: 0.5em;
}
.inner-chat .chat-input textarea{
	width: 100%;
	height:100%;
	text-align:left;
	padding:0.5em;
	border: none !important;
	box-sizing: border-box;
}
.inner-chat .line{
	padding:0.0em 0.5em;
    line-height: 1.2;
}
.inner-chat .line.name{
    line-height: 1.2;
    padding-top: 1em;
}
.button:disabled{
	opacity:0.7;
	cursor:default;
}
.chat-box .users .button{
	font-size: 1em !important;
    border-radius: 0px !important;
    text-align: left !important;
	background:transparent;
	border: 0px;
	border-bottom:1px solid #ffffff77;
}
.chat-box .users .button.active{
	background:white !important;
	color: black !important;
}
.chat-box .users .button:hover{
	background:white !important;
	color: black !important;
}
.chat-box .users{
	display: flex;
	flex-direction: column;
	border-right:1px solid white;
	overflow-y: scroll;
	max-height:none;
	height:100%;
}
.left-auto{
	margin-left: auto;
}
.large{
	font-size: 1.6em;
	padding-bottom:0.6em;
}
.opaque{
	opacity:0.8;
}
.other{
	color: #ffacc1 !important;
}
.left{
	text-align:left;
}
.yellow .slot{
	border-color: #ffd051 !important;
}
.yellow .slot .inner:hover{
	background-color: #ffd051 !important;
}
.red{
	color: #ffacc1;
}
.red .slot{
	border-color: #ffacc1 !important;
}
.red .slot .inner:hover{
	background-color: #ffacc1 !important;
}
.show-chat.active{
	background: #ffacc1;
	color:black !important;
	border-color: #ffacc1;
}
.show-chat{
	width:3em;
	height:3.1em;
	position:fixed;
	bottom:3.4em;
	right:17.3em;
	padding:0px;
}
.show-chat i{
	font-size:1.4em;
}
.pretty-p p, .text-outer .text p{
	margin-top:1em;
}
.pretty-p p:first-child, .text-outer .text p:first-child{
	margin-top:0em;
}
.dialog-box, .chat-box, .ai-box{
	width: 38em;
    height: 26em;
    background:#000d1d;
    border:1px solid #aaa;
    border-radius:8px;
    pointer-events:all;
    transition:opacity 0.2s, padding 0.2s ease, filter 0.3s ease;
    color:#eee;
    box-sizing: content-box;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    position:fixed;
    font-size:1.1em;
    bottom:50px;
    filter:blur(0px);
}
.dialog-box .dialog, .chat-box .chat, .ai-box .ai{
    display:flex;
    flex-direction:column;
    border-bottom:1px solid rgba(255,255,255,0.3);
    overflow-y:scroll;
	flex: 1 1 100%;
}
.dialog-box .dialog .line:first-child, .chat-box .chat .line:first-child{
    margin-top:auto;
}
.dialog-box ::-webkit-scrollbar-track, .chat-box ::-webkit-scrollbar-track{
    background:transparent;
    overflow:hidden;
}
.dialog-box .options{
    overflow-y:scroll;
    background:#05182e;
    flex:1 1 30%;
}
.dialog-box .dialog{
    flex:1 1 70%;
}
.dialog-box .dialog, .dialog-box .options{
    padding:0.5em 1em;
}
.ai-box .ai-input{
    height:36%;
    background:#05182e;
}
.ai-box .ai{
    padding:0.5em 1em;
    flex:1 1 auto;
}

a:hover{
    text-decoration:none;
}
p{
    margin:0px;
}
.ui-resizable-handle{
    width: 22px;
    height: 22px;
    position: absolute;
    bottom:0;
    right:0;
    padding:1px;
    opacity:0.7px;
}
.ui-resizable-handle .lni{
    font-size: 1.1em;
    color: #ccc;
}
#btn-save{
    max-width:80px;
    padding:0.6em 1.1em;
    cursor:pointer;
    font-size:1em;
}
#btn-logout{
    max-width: 100px;
    text-align: center;
}
.notes{
    width:100%;
    display: flex;
    flex-direction: column;
}
.notes textarea::selection{
    color:black;
    background: #ffacc1;
}
.notes textarea{
    width:100%;
    height:100%;
    box-sizing:border-box;
    font-size:1em;
    margin-bottom:15px;
}
.ui-row > .button{
	margin-right:0.5em;
}
.ui-row > .button:last-child{
	margin-right:0em;
}
.front{
    z-index:10000;
}
div.builder{
	display: none;
	left:8em;
	top:8em;
}
div.builder .lni-close{
	cursor:pointer;
}
.npcnotice p{
	display: flex;
	align-items: center;
	justify-content: center;
}
.npcnotice{
	background:black;
	border:1px solid #ffd051;
	color:#ffd051;
	font-weight:800;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius:100px;
	width: 1.3em;
    height: 1.3em;
    font-size: 1.4em;
}
.noclick{
	pointer-events: none;
}
#rogue-wrap{
	width:100%;
	display: grid;
	align-items: center;
	justify-content: center;
	position:fixed;
	z-index:5;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 3rem;
	max-width:80rem;
	margin:auto;
	padding-left:2rem;
	padding-right:2rem;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}
#rogue-wrap > *{
	width:100%;
	box-sizing: border-box;
}
#rogue-wrap > *:last-child{
	margin-right:0px;
}
#rogue.health-card{
	grid-column: 1 / span 3;
	width:100% !important;
	height:auto;
	border-color: #f17d6d;
	color: #f17d6d;
	background-color: #190c0a;
}
#rogue.health-card .desc{
	color: #f17d6d;
	text-align: center;
	font-weight: bold;
}
.my-power-ups{
	display: flex;
	flex-wrap: wrap;
	max-width: 36rem;
	justify-content: center;
	gap:1.2rem;
	position: fixed;
	top: 6rem;
	left: 50%;
	transform: translateX(-50%);
	font-size:0.85rem;
}
.power-up-chip{
	width: 2.2em;
    height: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2em;
    padding: 0px !important;
}
.power-up-chip:hover .power-up-hover{
	opacity:1;
	transform: translateY(105%);
}
.power-up-chip *{
	color:white;
	pointer-events: none;
}
.power-up-hover{
	opacity: 0;
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    width: 14rem;
    padding: 0.7em !important;
	pointer-events: none !important;
	line-height: 1.2;
}
.pudesc{
	font-weight:normal;
}
.hidden{
	display: none !important;
}
.bar-wrap{
	position:fixed;
	left:1em;
	bottom:5em;
	display: flex;
}
.potion-use-wrap{
	position:fixed;
	left:13em;
	bottom:12em;
	display: flex;
}
.micro-wrap{
	position:fixed;
	left:13em;
	bottom:9em;
	display: flex;
}
.micro-wrap > *,.potion-use-wrap > *{
	margin-left:1em;
}
.potion-use-slot{
	overflow: hidden;
	width:3em;
	height:3em;
	display: flex;
	justify-content:center;
	align-items:center;
	background:white;
	border-radius:0.3em;
	padding:0.3em;
    box-sizing: border-box;
	opacity:0;
	position:relative;
}
.potion-use-slot .uses p{
	font-size:2em;
	text-align:center;
	color:black;
	font-weight:600;
}
.micro-slot.red{
	color:black !important;
	background-color: #ffacc1 !important;
	border-color: #ffacc1 !important;
}
.micro-slot .lock{
	background-color: #ffacc1;
}
.micro-slot{
	overflow: hidden;
	width:3em;
	height:2em;
	display: flex;
	justify-content:space-between;
	align-items:center;
	background:white;
	border-radius:0.3em;
	padding:0.3em;
    box-sizing: border-box;
	opacity:0;
	position:relative;
}
.micro-slot img{
    height: 100%;
}
.upper-bar-wrap{
	position:fixed;
	left:50%;
	transform:translateX(-50%);
	bottom:4em;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:0.2em;
}
.upper-bar-wrap.active{
	border:1px solid white;
	border-radius:1em;
	background:black;
}
.lower-bar-wrap{
	position:fixed;
	left:1em;
	bottom:3.5em;
	display: flex;
}
.mode-wrap{
	position:fixed;
	left:4em;
	bottom:1.1em;
	display: flex;
	color:white;
	font-weight: bold;
	font-size:1.1em;
}
.bar-wrap > *{
	margin-right:1em;
}
.move-wrap{
	height:3em;
	background:white;
	border-radius:0.2em;
	border:0.2em solid white;
	padding:0.3em;
	box-sizing: border-box;
	overflow: hidden;
    position: relative;
}
.move-wrap img{
	height:100%;
}
.move-wrap .charge{
    height: 2.7em;
    width: 2.7em;
    position: absolute;
    top: -101%;
    left: 0em;
    filter: invert(100%);
    background: black;
    mix-blend-mode: difference;
}
.health-wrap{
	width:12em;
	height:3em;
	background:black;
	border:0.2em solid white;
	border-radius:0.2em;
    box-sizing: border-box;
    position: relative;
}
.health{
	background: #63d148;
	height:100%;
}
.exp{
	background: #5caccc;
	height:100%;
}
.exp-wrap{
	width:28em;
	height:1em;
	background:black;
	border-radius:0.2em;
    box-sizing: border-box;
	overflow: hidden;
	border:1px solid white;
}
.blockbar-wrap{
	width:12em;
	height:1em;
	background:black;
	border-radius:0.2em;
    box-sizing: border-box;
	display: flex;
	overflow: hidden;
}
.blockbar{
	background: #5caccc;
	height:100%;
	z-index: 1;
	display: inline-block;
}
.fearbar{
	background: #d6412e;
	height:100%;
	z-index: 2;
	display: inline-block;
}
.card{
    display:flex;
    padding:1.5em ;
    background: black;
    pointer-events:auto;
    border-radius:8px;
    border:1px solid #ddd;
	flex-direction: column;
	color:white;
}
.server-list{
	min-width:20em;
}
.server-btn{
	padding:0.5em !important;
}
.server-row .name, .server-row .pop, .server-row .btn-div{
	flex: 1 0 33%;
}
.area-title{
	padding: 0.5em 1em !important;
	color:white;
}
.mid-padding{
	padding:1em;
}
.center{
	position:fixed;
	left: 50%;
	transform: translateX(-50%);
}
.top{
	top:1em;
}
.rogue-card .title{
	font-size:1.5em;
	flex: 0 0 25%;
	font-weight: 800;
}
.rogue-card desc{
	flex: 1 1 75%;
	align-items:center;
	justify-content: center;
}
.rogue-card{
	width:15em;
	height:15em;
	align-items:space-between;
    justify-content: flex-start;
}
.rogue-card, .rogue-card *{
	color:white;
}
.rogue-card:hover{
	background:white;
	cursor:pointer;
}
.rogue-card:hover, .rogue-card:hover *{
	color:black;
}
.box{
    display:flex;
    padding:3em 0px 0px 0px ;
    padding-bottom:0px;
    background: black;
    pointer-events:auto;
    border-radius:8px;
    position:absolute;
    border:1px solid #ddd;
}
.small-text{
	font-size:0.8em;
}
.small-box{
	padding: 0.5em 0.8em !important;
}
.equal-box{
    display:flex;
    padding:1em;
    background: black;
    pointer-events:auto;
    border-radius:8px;
    position:absolute;
    border:1px solid #ddd;
	word-break:break-word;
	justify-content: center;
	text-align:center;
}
.box.notes-wrap{
    padding: 3em 1.6em;
    display:flex;
    align-items:stretch;
    justify-content: stretch;
    width:22em;
    height:26em;
}
.notes-wrap textarea{
    border:1px solid #aaa;
    padding:0.8em;
    background:black;
    color:#eee;
    resize: none;
}
.i-button img{
    user-select:none;
}
.ui{
    height:0px;
    position:fixed;
    top:0;
    left:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content: center;
    z-index:21;
	align-items: center;
	width: 100%;
}
.layout-layer{
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    background:rgba(0,0,0,0.6); 
    transition:height 0.4s ease;
    z-index:20;
    height:0;
    position:fixed;
    left:0;
    top:0;
    overflow:hidden;
}
.settings-layer,.account-layer{
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    background:rgba(0,0,0,0.3); 
    transition:height 0.4s ease;
    z-index:20;
    height:0;
    position:fixed;
    left:0;
    top:0;
    overflow:hidden;
}
.firebaseui-idp-password:hover{
    background:white !important;
}
.firebaseui-idp-password:hover img{
    filter: brightness(0);
}
.firebaseui-idp-password:hover span{
    color:black !important;
}
.firebaseui-idp-password{
    background:black !important;
    border:1px solid white !important;
}
.firebaseui-idp-google:hover{
    background: black !important;
}
.firebaseui-idp-google:hover span{
    color:#ffacc1 !important;
}
.firebaseui-idp-google:hover img{
    filter: brightness(0) saturate(100%) invert(96%) sepia(90%) saturate(1941%) hue-rotate(285deg) brightness(99%) contrast(104%);
}
.firebaseui-idp-google{
    background: #ffacc1 !important;
    border:1px solid #ffacc1 !important;
}
.firebaseui-idp-google span{
    color:black !important;
}
.firebaseui-idp-google img{
    filter: contrast(00%) grayscale(1) brightness(0);
}
.layout-buttons.lower{
    bottom:20px !important;
    top:auto;
}
.layout-buttons.lower > div{
    margin-bottom:0px;
    margin-top:15px;
}
.music{
    display:flex;
    flex-direction:column;
}
.music .genre:last-child{
    margin-bottom:0px;
    border-bottom: 1px solid #aaa;
}
.channels{
    display:flex;
    flex-direction: column;
    margin:0px 30px 30px;
    height:16.66em;
    border:1px solid white;
    overflow-y:scroll;
    list-style-type: none;
    padding-left:0px;
}
.genre,.channel-links{
    display:flex;
    flex-direction:column;
}
::-webkit-scrollbar {
    width: 6px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: black;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: white;
    border-radius:0px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #bbb;
  }
.music .option{
    padding:0.55em 1.4em;
    font-size: 1em;
    font-weight:200;
    color:#ddd;
    max-width:12.5em;
}
.music .option.active{
    background-color:#ffacc1;
    color:black;
    border-top:1px solid #ffacc1;
}
.music .channel-links{
    transition: all 0.1s ease;
    overflow:hidden;
    width:100%;
    height:0px;
}
.music .genre-title.active{
    background-color:#333;
}
.music .genre-title{
    padding:0.6em 0.7em;
    font-size: 1.2em;
    color: white;
    font-weight:bold;
}
.music .genre-title i{
    padding-right:0.33em;
}
.music .option,.music .genre-title{
    background:black;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid black;
    cursor:pointer;
}
.music .option:hover,.music .genre-title:hover{
background:#eee;
    border-top:1px solid #eee;
    color:black;
}
iframe{
    display:none;
}
body{
    background: black;
}
.small-top-right{
	right: 0.4em !important;
    top: 0.4em !important;
}
.close{
    position:absolute;
    right:13px;
    top:13px;
    padding:4px;
    cursor:pointer;
    border-radius:20px;
    display:flex;
	background: transparent;
    border: none;
}
.close:hover, .texts-wrap .box-close:hover{
    background: #ffffff99;
}
.close img{
    width:20px;
    height:20px;
}
.box-close{
    position:absolute;
    right:13px;
    top:13px;
    padding:4px;
    cursor:pointer;
    border-radius:20px;
    display:flex;
	background: transparent;
    border: none;
}
.box-close:hover{
    background: #333;
}
.box-close img{
    width:20px;
    height:20px;
}
.box-open img, .i-button i{
    width:25px;
    height:25px;
    color:#ddd;
    display: flex;
    font-size: 1.2em;
}
.i-button:hover{
    background: #eee !important;
    border: 1px solid #eee;
}
.i-button:hover i{
    color:black;
}
.account-wrap{
    padding:1.8em;
    display:flex;
    flex-direction:column;
    align-items: center;
    min-width:200px;
}
.account-wrap p{
    color:white;
}
.pbtn{
    background:black;
    border:1px solid #ddd;
    border-radius:5px;
    padding:0.8em 1.8em;
    width:100%;
    color:#ddd;
}
.pbtn:hover{
    background:#ddd;
    color:black;
}
.truegold{
	border-color: #ffd051 !important;
	background: #ffd051 !important;
}
.layout-buttons > *{
    transition:all 0.4s ease;
	position:relative;
}
.active .i-button, .notes-toggle.active .i-button, .account-toggle.active .i-button, .focus-toggle.active .i-button{
    background-color:#ffacc1;
    border-color:#ffacc1; 
}
canvas{
    transition: opacity 0.3s ease;
}
.active .i-button i, .notes-toggle.active .i-button i, .account-toggle.active .i-button i, .focus-toggle.active .i-button i{
    color:#111;
}
.visible{
    opacity:1;
    pointer-events:all;
}
.invisible{
    opacity:0;
    pointer-events:none;
}
.layout-buttons.help-button{
    top:1em;
    right:9em;
	left:unset;
    position:fixed;
    display:flex;
    flex-direction:column;
}
.layout-buttons.settings-buttons{
    z-index:500;
    top:1em;
    right:5em;
	left:unset;
    position:fixed;
    display:flex;
    flex-direction:column;
}
.layout-buttons.account-buttons{
    z-index:500;
    top:1em;
    right:1em;
	left:unset;
    position:fixed;
    display:flex;
    flex-direction:column;
}

.layout-buttons{
    z-index:500;
    top:20px;
    left:20px;
    position:fixed;
    display:flex;
    flex-direction:column;
}
.layout-buttons > *{
    margin-bottom:0.8em;
}
.i-button{
    width:50;
    height:50;
    background:black;
    border: 1px solid #eee;
    padding:0.55em;
    border-radius:10px;
    display: flex;
    justify-content:center;
    align-items:center;
}
.row > *{
    margin-right:0.9em;
}
.row > *:last-child{
    margin-right:0px;
}
.row{
    display:flex;
    justify-content: space-between;
    padding-bottom:0.9em;
    align-items: center;
}
.play{
    font-size: 22px;
    display: flex;
    align-items: center;
}
.play i{
    font-size: 22px;
    width:auto !important;
    height:auto !important;
}
.basic-i{
    color:#ddd;
    font-size: 22px;
}
.uk-range::-webkit-slider-thumb:hover,.uk-range::-webkit-slider-thumb:focus{
    background-color:#ffacc1 !important;
    border:1px solid #ffacc1;
}
#thumb,.uk-range::-webkit-slider-thumb{
    background-color:black !important;
    border:1px solid #eee;
    margin-top: -11px;
    height: 25px;
    width: 25px;
    border-radius:5px;
}
.seeker:disabled{
    opacity:0.5;
}
.seeker{
    padding-bottom:1.8em;
}
.seeker::-webkit-slider-thumb{
    width:15px;
    height:15px;
    border-radius:3px;
    margin-top: -7px;
    transform:rotate(45deg);
}
.uk-range::-webkit-slider-runnable-track{
    height:2px;
    background:white;
}
.lni-volume{
    font-size:22px;
    padding-right:5px;
}
.lni-volume-mute{
    font-size:26px;
    padding-left:1px;
}
.volume-i, .game-volume-i{
    cursor:pointer;
    margin-right:8px;
}
.bottom-wrap{
    margin-top:20px;
    border-top:1px solid #777;
    background-color:#070707;
    overflow:hidden;
    border-radius: 0px 0px 12px 12px;
    padding: 0.6em 2em 0.8em;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.music a{
    user-select:none;
}
.title{
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    color:white;
    padding:0px 0px 0.33em 0px;
    max-width:210px;
    text-align:center;
    line-height:1.5;
    min-height:71px;
    font-size:1em;
    display:flex;
    align-items:center;
    justify-content: center;
}
.marquee {
    width: 230px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    color:white;
    padding:0.33em 0px 0.8em 0px;
    max-width:230px;
  }
  .marquee span {
    display: inline-block;
    position: relative;
    left: 0px;
  }
  .marquee:hover span {
    animation: marquee 4s linear infinite;
  }
  
  .marquee span:nth-child(1) {
    animation-delay: 0s;
  }
  
  @keyframes marquee {
    0%   { left: 0%; }
    50% { left: -120%; }
    50.00000001% { left: 100%; }
    100% { left: 0%; }
  }


  body{
      background-color:#000d1d;
  }

  .i-button[data-open]:hover::after{
	position:absolute;
	left:100%;
	margin-left:0.6rem;
	line-height:1;
	background:black;
	color:white;
	border: 1px solid white;
	border-radius:6px;
	padding:0.4rem;
  }
  
  .i-button[data-open="inv-wrap"]:hover::after{
	content: "Inventory";
  }
  
  .i-button[data-open="stats-wrap"]:hover::after{
	content: "Skills";
  }
  
  .i-button[data-open="task-wrap"]:hover::after{
	content: "Quests";
  }
  
  .i-button[data-open="texts-el"]:hover::after{
	content: "Documents";
  }
  
  .i-button[data-open="followers-el"]:hover::after{
	content: "Followers";
  }
  .inner .grade{
	color:black;
    display: flex;
    align-items: center;
    justify-content: center;
    height:0.6em;
	width:0.6em;
    line-height: 0.6;
    border-radius: 0.15em;
	position:absolute;
	bottom:0.1em;
	left:0.1em;
  }
  .grade.standard{
	background:#aaa;
  }
  .grade.good{
	background:#cff5a4;
  }
  .grade.exquisite{
	background:#4dca6c;
  }
  .grade.legendary{
	background:#e7dd50;
  }
  .grade.mythical{
	background:#f067b2;
  }
  .grade.transcendent{
	background:#9f63ff;
  }
  .inner .charges{
	color:black;
	background:white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 3px 4px 5px;
    line-height: 0.6;
    border-bottom-left-radius: 5px;
	position:absolute;
	top:0em;
	right:0em;
  }
  .slot .inner img{
	width: 100%;
    height: 100%;
	image-rendering: pixelated;
  }
  .slot.locked .bg{
	opacity:0.3;
  }
  .slot.locked{
	border:1px solid #ffffff33;
  }
  #flash{
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:red;
	opacity: 0;
	pointer-events:none;
  }
  #stun{
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:#6dfed7;
	opacity: 0;
	pointer-events:none;
  }
  #silence{
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:#8200c8;
	opacity: 0;
	pointer-events:none;
  }
  .mini-box{
	max-width:20em;
	left:1em;
	top:5em;
	position:fixed;
	padding:1em !important;
	overflow:hidden;
	font-size:0.95em;
  }
  .feed-box{
	width:15em;
	height:10em;
	right:1em;
	top:5em;
	position:fixed;
	padding:0em !important;
	overflow:hidden;
	font-size:0.95em;
  }
  .feed-box-inner{
	padding:1em !important;
	overflow-y: scroll;
	height:100%;
	width:100%;
	box-sizing: border-box;
	}
  .feed{
	width:100%;
	padding:0;
	box-sizing: border-box;
  }
  .rest-indicator{
	width:3em;
	height:3em;
	right:1.6em;
	top:16em;
	position:fixed;
	padding:0em !important;
	font-size:0.95em;
	pointer-events: all;
  }
  .rest-indicator-inner{
	overflow:hidden;
	border-radius:10em;
	width:100%;
	height:100%;
	background-color: #ecc900;
	color: black;
	font-size:2em;
	display: flex;
	align-items: center;
	justify-content: center;
	border:1px solid black;
  }
  .rest-info{
	display: none;
  }
  .rest-indicator:hover .rest-info{
	display: flex;
	position: absolute;
	bottom:-0.6em;
	right:0em;
	width: 12em;
	transform:translateY(100%);
	background-color: #ecc900;
	color: black;
	text-align: left;
	padding:1em;
	border-radius:1em;
	border:1px solid black;
  }

@keyframes feed {
  from {
	background-color: #ecc900cc;
	color:black;
  }
  to {
	background-color: transparent;
	color:white;
}
}

.feed-item{
	animation: feed 1s;
	padding: 0em 0.3em;
	border-radius:0.3em;
}







/* BREWING CSS */
.titlebar{
	position:fixed;
	top:0;
	left: 0;
	width:100%;
	height: env(titlebar-area-height, 0px);
	background:transparent;
	z-index: 100000000000;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	overflow:hidden;
	user-select: none;
	app-region: drag;
}

.control-box{
	padding:1em;
	margin-bottom:1em;
	background:#f2f2f233;
	border-radius:0.15em;
	display: flex;
	flex-direction: column;
}
.control-row{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:1.2em;
}
.craft-button{
	padding-bottom:0.8em !important;
	font-size:1.25em;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.control-button, .craft-button, .craft-mode-button, .craft-menu-button{
	padding:0.5em;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	appearance: none;
	border-image-slice:2 2 3 2 fill;
	border-image-width:0.6em 0.6em 0.9em 0.6em;
	border-image-outset:2 2 3 2;
	border-image-repeat:repeat repeat;
	border-image-source:url("assets/cauldren/craft-button.png");
	border-style:solid;
	box-shadow: 0px 0.5em 0.5em 0px #00000044;
	cursor:pointer;
	margin-top:0.3em;
	display: flex;
	flex-direction: column;
	color:black;
}
#smithUI .control-button, #smithUI .craft-button, #smithUI .craft-mode-button, #smithUI .craft-menu-button{
	border-image-slice:2 2 3 2 fill;
	border-image-width:0.6em 0.6em 0.9em 0.6em;
	border-image-outset:2 2 3 2;
	border-image-repeat:repeat repeat;
	border-image-source:url("assets/cauldren/gray-button.png");
}
#smithUI .control-button.orange{
	border-image-slice:2 2 3 2 fill;
	border-image-width:0.6em 0.6em 0.9em 0.6em;
	border-image-outset:2 2 3 2;
	border-image-repeat:repeat repeat;
	border-image-source:url("assets/cauldren/orange-button.png");
}
#smithUI .control-button.yellow{
	border-image-slice:2 2 3 2 fill;
	border-image-width:0.6em 0.6em 0.9em 0.6em;
	border-image-outset:2 2 3 2;
	border-image-repeat:repeat repeat;
	border-image-source:url("assets/cauldren/yellow-button.png");
}
#smithUI .control-button.blue{
	border-image-slice:2 2 3 2 fill;
	border-image-width:0.6em 0.6em 0.9em 0.6em;
	border-image-outset:2 2 3 2;
	border-image-repeat:repeat repeat;
	border-image-source:url("assets/cauldren/blue-button.png");
}
.craft-bad{
	padding:0.6em;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	appearance: none;
	border-image-slice:2 2 3 2 fill;
	border-image-width:0.6em 0.6em 0.9em 0.6em;
	border-image-outset:2 2 3 2;
	border-image-repeat:repeat repeat;
	border-image-source:url("assets/cauldren/craft-bad.png");
	border-style:solid;
	box-shadow: 0px 0.5em 0.5em 0px #00000044;
	cursor:pointer;
	margin-top:0.3em;
	display: flex;
	flex-direction: column;
	color:white !important;
}
.craft-good{
	padding:0.6em;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	appearance: none;
	border-image-slice:2 2 3 2 fill;
	border-image-width:0.6em 0.6em 0.9em 0.6em;
	border-image-outset:2 2 3 2;
	border-image-repeat:repeat repeat;
	border-image-source:url("assets/cauldren/craft-good.png");
	border-style:solid;
	box-shadow: 0px 0.5em 0.5em 0px #00000044;
	cursor:pointer;
	margin-top:0.3em;
	display: flex;
	flex-direction: column;
	color:white !important;
}
.craftUI .mini-button{
	position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: 0px;
    cursor: pointer;
}
.craft-end{
	padding-bottom: 0.85em !important;
	font-size:1.2;
	font-weight:700;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.craft-mode-button{
	padding-bottom:0.85em !important;
	font-size:1em;
	flex: 1 0 0;
	color:black;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	font-weight:700;
}
.craft-menu-button{
	color:black;
	text-align: left;
	margin-bottom:0.85em;
	align-items: stretch;
	padding:0.7em;
	padding-bottom:1em;
}
.craft-menu-button * {
	color:black;
	text-align: left;
}
.control-button{
	position: relative;
}
.control-button h4, .craft-button{
	color:black;
	font-weight:700;
	margin-bottom:0.4em;
}
.control-button .control-tint{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:red;
	z-index: 2;
	opacity: 0.2;
}
.control-row button:hover, .control-line button:hover, .control-toggle button:hover, .craft-button:hover, .craft-mode-button:hover, .craft-menu-button:hover{
	filter:brightness(1.2);
}




.craft-grid{
	display: grid;
	/* minmax(0,1fr) kills the min-content floor: swapping .craft-setup for
	   .controls at brew start must not redistribute column widths */
	grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
	gap: 4em;
	padding:2em;
	box-sizing: border-box;
	width:100%;
	/* fill the aspect-locked panel so total height never tracks content */
	height:100%;
}
.craft-col{
	display: flex;
	height:100%;
	flex-direction:column;
	justify-content: center;
	align-items: stretch;
}
.bar{
	width:100%;
	height:18px;
	background:linear-gradient(to bottom, black, black 50%, transparent 50%, transparent);
	position:relative;
	overflow:hidden;
}
.bar.success .bar-inner{
	background: lightgreen;
}
.bar-inner{
	height:9px;
	background:#68cbec;
	position: relative;
	z-index: 1;
	width:0%;
}
button.item-button{
	color:white;
	background-color:black;
	border:1px solid white;
	border-radius:4px;
}
.item-button.selected{
	background:lightgreen;
	border-color: lightgreen;
	color:black;
}
.item-button:hover{
	background:white;
	border-color: white;
	color:black;
}
.bar-temp{
	height:9px;
	background: palegoldenrod;
	position:absolute;
	top:0;
	z-index:12;
}
.bar-goal-1, .bar-goal-2, .bar-goal-3, .bar-goal-4{
	height:100%;
	position: absolute;
	background: #008000;
}
.vertical .bar-goal-1, .vertical .bar-goal-2, .vertical .bar-goal-3, .vertical .bar-goal-4{
	height:0;
	width:100%;
}
.val-bar-progress{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index: 2;
	display: flex;
	mask-size: contain;
	clip-path: inset(0% 0% 0% 0%);
}
.val-bar-progress.flatline{
	mask-image: url(./assets/cauldren/flatline.png);
}
.val-bar-progress.openup{
	mask-image: url(./assets/cauldren/openup.png);
}
.val-bar-progress.twoside{
	mask-image: url(./assets/cauldren/twoside.png);
}
.vertical .bar-goal-1, .vertical .bar-goal-2, .vertical .bar-goal-3, .vertical .bar-goal-4{
	width:0.55em;
	position: absolute;
	background: #008000;
}
.bar-content{
	cursor:pointer;
}
.bar-content.zoom{
	overflow: hidden;
}
.bar-goals{
	width:100%;
	position: relative;
	height:0.55em;
	background: #00000033;
	border-radius: 0.3em;
	overflow: hidden;
	box-shadow: inset 0 1px 2px #00000044;
}
.craft-bar-wrap:not(.vertical) .bar-goals{
	margin-top: 0.3em;
}
.vertical .bar-goals{
	flex: 1 0 0.55em;
	position: relative;
	height:100%
}
.val-bar{
	display: flex;
	position:relative;
	border-radius:0.6em;
	overflow:hidden;
	box-shadow: 0.2em 0.2em 0em 0em #00000026;
}
.val-bar > svg{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;

}
.val-bar svg{
	border-radius:0.3em;
}
.craftUI .heat{
	font-size:0.9rem;
	padding:1em;
	background:#f6f6f6aa;
	border-radius: 1em;
}
.craftUI .heat-val{
	font-size:1.5em;
	font-weight: 700;
}
.craftUI .overlay-wrap{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 20;
}
.craftUI .overlay{
	background:#222;
	color:white;
	display: flex;
	flex-direction: column;
	padding:3em;
	border-radius:1em;
	border: 1px solid white;
	max-width:30rem;
}
.craftUI .section{
	margin-bottom:3em;
}
.craftUI .item-result{
	color:lightgreen;
}
.craftUI{
	position: fixed;
    top: 0;
    bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width:100%;
	font-size:1.1em;
}
.craftUI .craft-active{
	min-width: 0px;
    min-height: 0px;
    aspect-ratio: 4 / 3;
	/* anchor the panel to the viewport, never to its content: content-driven
	   sizing made the whole layout breathe whenever any text/state changed */
	width: min(100%, calc(100vh * 4 / 3));
	max-width: 100%;
    max-height: 100%;
	font-size:calc(min(100vw, calc(100vh * 1.3)) / 82);
	display: flex;
    align-items: center;
    justify-content: center;
}
.craftUI h2{
	margin: 0;
    font-size: 1.4em;
    color: black;
    margin-bottom: 0.7em;
    font-weight: 900;
}
.craftUI .craft-setup,.craftUI .controls,.craftUI .feedback.craft-col{
	border-radius:1em;
	padding:1em;
	display: flex;
    flex-direction: column;
	box-sizing: border-box;
}
.craftUI .craft-setup{
	padding-top:2em !important;
	position:relative;
}
.wood-box, .craftUI .heat-wrap.control-box{
	border-image:url(./assets/cauldren/craft-box.png);
	border-image-slice:
	10 7 10 7 fill;
	border-image-width:
	28px 20px 30px 20px;
	border-image-outset:
	28px 20px 30px 20px;
	border-image-repeat:
	repeat repeat;
	image-rendering: pixelated;
	padding:1em;
}
#smithUI .wood-box, #smithUI .heat-wrap.control-box{
	border-image:url(./assets/cauldren/smith-box.png);
	border-image-slice:
	10 7 10 7 fill;
	border-image-width:
	28px 20px 30px 20px;
	border-image-outset:
	28px 20px 30px 20px;
	border-image-repeat:
	repeat repeat;
	image-rendering: pixelated;
}
.craftUI .ui-selected{
	border-image-slice:2 2 2 2 fill;
	border-image-width:0.6em;
	border-image-outset:2 2 2 2;
	border-image-repeat:repeat repeat;
	/* press effect via transform, NOT margin -- margin changes reflow the whole
	   grid every tick the selection state churns (the random ~10px resize) */
	transform:translateY(0.3em);
	border-image-source:url("assets/cauldren/craft-button-click.png");
}
#smithUI .ui-selected{
	border-image-slice:2 2 2 2 fill;
	border-image-width:0.6em;
	border-image-outset:2 2 2 2;
	border-image-repeat:repeat repeat;
	border-image-source:url("assets/cauldren/gray-button-click.png");
}
#smithUI .orange.ui-selected{
	border-image-slice:2 2 2 2 fill;
	border-image-width:0.6em;
	border-image-outset:2 2 2 2;
	border-image-repeat:repeat repeat;
	border-image-source:url("assets/cauldren/orange-button-click.png");
}
#smithUI .yellow.ui-selected{
	border-image-slice:2 2 2 2 fill;
	border-image-width:0.6em;
	border-image-outset:2 2 2 2;
	border-image-repeat:repeat repeat;
	border-image-source:url("assets/cauldren/yellow-button-click.png");
}
#smithUI .blue.ui-selected{
	border-image-slice:2 2 2 2 fill;
	border-image-width:0.6em;
	border-image-outset:2 2 2 2;
	border-image-repeat:repeat repeat;
	border-image-source:url("assets/cauldren/blue-button-click.png");
}
.craftUI .ui-on, [data-mode="tutorial"] [data-mode="tutorial"], [data-mode="practice"] [data-mode="practice"], [data-mode="craft"] [data-mode="craft"]{
	border-image-slice:2 2 4 2 fill;
	border-image-width:0.6em 0.6em 1.2em 0.6em;
	border-image-outset:2 2 4 2;
	border-image-repeat:repeat repeat;
	/* raised effect via transform, NOT margin (see .ui-selected note) */
	transform:translateY(-0.3em);
	color:white;
	border-image-source:url("assets/cauldren/craft-button-on.png");
}
#smithUI .ui-on, #smithUI [data-mode="tutorial"] [data-mode="tutorial"], #smithUI [data-mode="practice"] [data-mode="practice"], #smithUI [data-mode="craft"] [data-mode="craft"]{
	border-image-slice:2 2 4 2 fill;
	border-image-width:0.6em 0.6em 1.2em 0.6em;
	border-image-outset:2 2 4 2;
	border-image-repeat:repeat repeat;
	border-image-source:url("assets/cauldren/gray-button-on.png");
}
.heat-val{
	color:black;
}
.craftUI .tickbar{
	height: 2em;
    background: black;
    max-width: 10em;
    margin-bottom: auto;
    border-radius: 0.5em;
	overflow:hidden;
}
.craft-list-inner{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background: #ffffff33;
	border: 0.25em solid #00000066;
	padding:0.5em;
}
.recipes-inner{
	overflow-y: scroll;
    max-height: 20em;
}
.craft-list{
	
}
.craft-menu-button h3{
	font-size:1.1em;
	font-weight:700;
	margin-bottom:0;
}
.craft-menu-button p{
	font-size:0.9em;
}
.craftUI h3{
	font-weight:800;
	color:black;
}
[data-mode="tutorial"] [data-mode="tutorial"]{
	background:white;
	color:black;
}
[data-mode="practice"] [data-mode="practice"]{
	background:white;
	color:black;
}
[data-mode="craft"] [data-mode="craft"]{
	background:white;
	color:black;
}
.craft-mode{
	display: flex;
	gap:0.7em;
}
.craft-menu-button.deactivated{
	opacity:0.5;
	background: #ffffff44;
}
.craft-start.deactivated{
	opacity:0.5;
}
.craft-finish{
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background: #3b2027cc;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}
.craft-finish-box{
	padding:1.5em 2em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	text-align: center;
	box-sizing: border-box;
	/* min() so min-width can't beat max-width on small viewports, and the 4em
	   margins leave room for the wood border-image-outset (~30px outside the box) */
	min-width: min(22rem, calc(100vw - 8em));
	max-width: calc(100vw - 8em);
	max-height: calc(100vh - 8em);
	overflow-y: auto;
	font-size:calc(min(100vw, calc(100vh * 1.3)) / 82);
}
.craft-finish-box *{
	color:black;
}
.craft-finish-box h2{
	text-align: center;
	margin-bottom: 0em;
}
.craft-finish-box .result{
	margin-bottom: 0.5em;
}
.craft-finish-box .result-name{
	font-size: 1.5em;
	font-weight: 800;
	margin: 0 0 0em 0;
}
.craft-finish-box .result-grade{
	margin: 0;
}
.craft-finish-box .result-grade span{
	text-transform: capitalize;
	font-weight: 800;
}
.craft-finish-box .grade-poor{ color:#3d87ad; }
.craft-finish-box .grade-standard{ color:#7e930c; }
.craft-finish-box .grade-good{ color:#5d8f12; }
.craft-finish-box .grade-exquisite{ color:#3a7d0e; }
.craft-finish-box .grade-legendary{ color:#006400; }
.craft-finish-box .grade-mythical{ color:#d10677; }
.craft-finish-box .section{
	max-width: 44vh;
}
 .craftUI .craft-finish-box .section{
	margin-bottom:1.5em;
}
.essence-bar .bar-back{
	margin-bottom: -0.7em;
}
.craft-reset{

}
.heat-col{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.craft-list{
	flex: 1 0 auto;
	margin-bottom:1em;
}
.hide{
	opacity:0;
	pointer-events: none;
	overflow:hidden;
	height:1px;
}
.feedback h2{
	padding: 0.3em 0em;
}
.feedback h2.attention{
	background:coral;
	color:black;
	border:black;
}
.craftUI .section{
	display: flex;
	flex-direction: column;
}
.craftUI .section .section-inner{
	display: flex;
	flex-direction: column;
}
.craftUI .section.features .section-inner{
	display: grid;
	/* minmax(0,1fr), NOT 1fr: plain 1fr has a min-content floor, so when a bar
	   label grows ("Essence" -> "Essence: 0.00") its column steals width, the
	   neighbors' sublabels wrap, and the whole panel gets a line taller */
	grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
	grid-template-rows: 1fr 1fr;
	gap:0.5em;
}
#smithUI .section.features .section-inner{
	grid-template-rows: 1fr 1fr 1fr;
}
.craftUI .craft-bar-wrap{
	background: linear-gradient(#ffffff66, #ffffff44);
	padding: 0.55em 0.65em;
	border: 1px solid #00000033;
	border-radius: 0.45em;
	box-shadow: 0.25em 0.25em 0px 0px #00000022, inset 0 1px 0 #ffffff55;
	font-size:0.85em;
}
.craftUI .vertical .val-bar{
	flex: 1 0 30%;
}
.craftUI .craft-bar-wrap.vertical{
	display:flex;
	flex-direction: column;
}
.craftUI .craft-bar-wrap.vertical .val-bar-progress{
    align-items: stretch;
	
	background: linear-gradient(to top, #75d3ff, #75d3ff 0%, black 0%, black 100%);
}
.craftUI .craft-bar-wrap.vertical .bar-content{
	display:flex;
	flex-direction: row;
	align-items: stretch;
	flex: 1;
}
.craftUI .craft-bar-wrap.vertical .sublabel-row{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align:right;
}
.craftUI .craft-bar-wrap.vertical canvas{
	flex: 1;
}
.craftUI .acidity{
	grid-row: 1;
	grid-column: 1 / span 2;
}
.craftUI .blend{
	grid-row: 2;
	grid-column: 1 / span 2;
}
.craftUI .essence{
	grid-column: 3;
	grid-row: 1 / span 2;
}
.craftUI .thickness{
	grid-column: 1 / span 3;
}
.craftUI .size{
	grid-column: 1 / span 3;
}
.craftUI .brittleness{
	grid-column: 1 / span 3;
}
.craftUI
.tickbar-inner{
	height:100%;
	background: pink;
	width:0%;
}
button{
	font-size:1em;
}
.control-line{
	display: grid;
	gap:1em;
}
.control-toggle{
	display: grid;
	grid-template-columns: 1fr;
}
button.ui-selected{
	appearance: none;
	background-color: lightgreen;
}
.heat-wrap{
	text-align:center;
	margin-top:30em;
}
.heat-wrap h2{
	font-size:1.2em;
	margin-top:0;
}
.sublabel-row{
	display: flex;
	justify-content: space-between;
}
.sublabel-row p{
	margin-bottom:0px;
	margin-top:0px;
	font-size:0.85em;
	opacity:0.75;
}
.sublabel-row .right{
	text-align:right;
}
.sublabel-row .craft-center{
	text-align:center;
}
.next-input{
	background-color: palevioletred !important;
}
.tooltip{
	color: black;
}
.tick-bar{
	height:2rem;
	width:8rem;
	background:black;
	position: absolute;
	top:4rem;
	left:2rem;
	border-radius:0.7rem;
	overflow:hidden;
}
.tick-inner{
	width:0%;
	height:100%;
	background:palevioletred;
}
.bar-val{
	margin-bottom:0.4rem;
	margin-top:0px;
	font-weight:700;
	white-space: nowrap;
	/* values update every tick; tabular digits stop the label width wobbling,
	   and ellipsis keeps long labels from spilling out of fixed-width columns */
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bar-change{
	margin:0px;
}
.craft-col .craft-bar-wrap{
	margin-bottom:0.5rem;
}
.craft-col .craft-bar-wrap *{
	color:black;
}
.status-flash{
	pointer-events: none;
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	opacity:0.1;
}
*:has(> .tooltip){
	position: relative;
}
@keyframes bounce {
    25% { transform: translateX(-50%) translateY(-82%); background:#ecc900; }
    42% { transform: translateX(-50%) translateY(calc(-82% - 0.2em)); background:white; }
    59% { transform: translateX(-50%) translateY(-82%); background:#ecc900;  }
}
@keyframes bounce-arrow {
    25% { background:#ecc900; }
    42% { background:white; }
    59% { background:#ecc900;  }
}
@keyframes bounceunder {
    25% { transform: translateX(-50%) translateY(32%); background:#ecc900; }
    42% { transform: translateX(-50%) translateY(calc(32% + 0.2em)); background:white; }
    59% { transform: translateX(-50%) translateY(32%); background:#ecc900;  }
}
.tooltip{
	animation: bounce 1.4s infinite;
	position: absolute;
    left: 50%;
	top: -1em;
    transform: translateX(-50%) translateY(-82%);
    text-align: center;
    border: 1px solid #000000aa;
    border-radius: 0.4em;
    font-size: 0.9em;
    padding: 0.5em;
    min-width: 10rem;
	background: #ecc900;
	pointer-events: none;
	box-shadow: 0px 0px 2em 0px #00000066;
	z-index: 1;
}
.tooltip.under{
	animation: bounceunder 1.4s infinite;
    transform: translateX(-50%) translateY(32%);
	top: 0;
}
.tooltip *{
	position: relative;
	z-index: 3;
}
.tooltip::after{
	animation: bounce-arrow 1.4s infinite;
	 content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1.2em;
    border-bottom: 1px solid #000000aa;
    border-right: 1px solid #000000aa;
    height: 1.2em;
    background: #ecc900;
    transform: translateY(50%) translateX(-50%) rotate(45deg);
	z-index: 2;
}
.tooltip.under::after{
    top: 0;
    left: 50%;
    transform: translateY(-50%) translateX(-50%) rotate(45deg);
    border-bottom: 0px;
    border-right: 0px;
    border-top: 1px solid #000000aa;
    border-left: 1px solid #000000aa;
}



/* END BREWING CSS */

.filter-list .button:hover,.filter-list .button.active, .builder .ui-list .button.active{
	background: white;
	color: black;
}

.builder .ui-list{
	overflow: scroll;
	max-height:25em;
}

.item-button{
	display: flex;
    align-items: center;
	font-size:1.3em;
}
.item-button img{
	max-width: 1.5em;
	margin-right:1em;
}
.item-button img{
	max-width: 1.5em;
	margin-right:1em;
}
.item-button:not(.active) img{
	filter: invert();
}




/* MAP CSS */

.world-map{
	position: fixed;
	width:100%;
	height:100%;
	top:0;
}


.rest-ui .rest-btn.active{
	background-color: #ecc900;
	border-color: #ecc900;
	color:black;
}
.rest-ui .rest-btn:hover{
	background: white;
	color: black;
}
.builder .rest-hover{
	position: absolute;
	right: -1em;
	transform: translateX(100%);
	top: 0em;
	background:black;
	border:1px solid white;
	border-radius:0.5em;
	padding:0.5em;
	color:white;
	display: none;
	max-width:300px;
}

.builder:has(.has-rest:hover) .rest-hover, .builder:has(.rest-btn:hover) .rest-hover{
	display: block;
}


.task-overview-wrap{
	position: fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
}
.task-overview{
	width: 26em;
	height: 30em;
	pointer-events: all;
	position: relative;
}
.task-overview .lni-close{
	position: absolute;
	right:1.5em;
	top:1.5em;
	cursor:pointer;
}
.task-overview-inner{
	overflow-x: scroll;
}
.task-overview h2{
	margin-top:0.5em;
	margin-top:0.3em;
}
.task-overview h3, .task-overview h4{
	color: white;
	margin-bottom:0px !important;
	margin-top:0.3em !important;
}
.task-overview .item-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top:0.3em;
}
.task-overview .item-list{
	padding-right:0.4em;
}
.task-overview .decs-list{
	border-left:1px solid #555;
	padding-left:0.4em;
}