@charset "UTF-8";

.rechnerWrapper{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:21000;
	background:rgba(0,0,0,.8);
	transition: 300ms;
	display:flex;
	align-items:flex-start;
	justify-content:center;
	padding:10px;
	opacity:0;
	pointer-events:none;
}

.rechnerWrapper.active{
	opacity:1;
	pointer-events:all;
}

.rechner{
	display:block;
	background-color:#f9ece1;
	padding:20px;
	border-radius:20px;
	transition: 300ms;
	border-top-width: 3px;
    border-left-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-style: solid;
    border-color: #eb9a5d;
    box-shadow: 1px 1px 0px 2px rgb(0 0 0);
	max-height:calc(100vh - 20px);
	overflow:auto;
	width:380px;
	position:relative;
	z-index:2;
	transition-delay: 500ms;
	transition:300ms;
	transform:scale(0);
}

.rechnerWrapper.active .rechner{
	transform:scale(1);
}



.tools{
	position:fixed;
	right:0;
	top:200px;
	z-index:300;
	width:52px;
}

/* */

.xp-bar-wrapper{
	display:block;
	min-height:6px;
	position:relative;
	width:100%;
}

.xp-bar{
	content:"";
	display:block;
	width:100%;
	transition:300ms;
	background-color:#57c452;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
	height:100%;
}

.xp-bar-wrapper:after{
	content:"";
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:3px;
	background-color:rgba(0,0,0,.35);
	pointer-events:none;
	z-index:2;
}

.xp-bar-wrapper span{
	display:block;
	width:100%;
	font-size:11px;
	line-height:1;
	color:#fff;
	position:relative;
	z-index:3;
	text-align: center;
		padding-bottom:3px
}

.whitespace{
	white-space: nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}