/* FLEX CARD AND BLOG TEXT CONTAINER (READY) */
.recard {
	display:			flex;
	max-width:			35rem;
	margin:				0 auto;
	padding:			0.5rem;
	justify-content:	center;
	flex-wrap:			wrap;
}
.blogtext {
	max-width:	35rem;
	margin:		0 auto;
	padding:	1rem;
}



/* TOP BAR (READY) */
.headerbar {
	display:		flex;
	position:		fixed;
	top:			0;
	width:			100%;
	height:			3rem;
	padding:		0 0.5rem;
	color:			#FFF;
	box-sizing:		border-box;
	z-index:		1;
	align-items:	center;
}
.headerbar > div {
	flex-grow:	0;
}
.headerbar > div:nth-child(2) {
	padding-left:	0.5rem;
	flex-grow:		1;
}
.headerbar > i {
	margin-left:	0.5rem;
	font-size:		1.5rem;
	cursor:			pointer;
}



/* BOTTOM BAR (READY) */
.menubar {
	position:		fixed;
	bottom:			0;
	width:			100%;
	padding-bottom:	1rem;
	white-space:	nowrap;
	text-align:		center;
}
.menubar > div {
	display:		inline-block;
	width:			3rem;
	font-size:		1.75rem;
	line-height:	3rem;
	color:			#FFF;
	border-radius:	1rem;
	cursor:			pointer;
}
.menubar > div + div {
	margin-left:	0.35rem;
}
.menubar a {
	color:	inherit;
}



/* NOTIFICATION ICON (READY) */
.note {
	position:		fixed;
	bottom:			1rem;
	right:			0;
	width:			3.5rem;
	font-size:		2rem;
	line-height:	3.5rem;
	text-align:		center;
	color:			var(--pure-theme-color);
	background:		#FFF;
	border-radius:	50%;
	box-shadow:		0 1rem 2.5rem rgba(0,0,0,0.1);
	transition:		transform 0.25s ease;
	transform:		translateX(-1rem);
	cursor:			pointer;
}
.note[data-total="0"] {
	transform:	translateX(5rem);
}
.note:after {
	content:		attr(data-total);
	position:		absolute;
	left:			-0.5rem;
	width:			1.75rem;
	font-size:		0.8rem;
	line-height:	1.75rem;
	color:			#FFF;
	background:		var(--app-red-color);
	border-radius:	50%;
}
.note.inverted {
	left:		0;
	right:		auto;
	transform:	translateX(1rem);
}
.note.inverted[data-total="0"] {
	transform:	translateX(-5rem);
}
.note.inverted:after {
	left:	auto;
	right:	-0.5rem;
}



/* TIP AND TAG (READY) */
.tip {
	max-width:	17rem;
	margin:		1rem auto;
	padding:	0.5rem;
	text-align:	center;
	background:	rgb(251,252,253);
	box-shadow:	0 0.1rem 0.25rem rgba(0,0,0,0.1);
}
.tip.full {
	max-width:	none;
}
.tag {
	display:		inline-block;
	margin:			0.15rem;
	padding:		0.25rem 0.5rem;
	font-size:		0.8rem;
	border-radius:	0.25rem;
}



/* VERTICAL MENU (READY) */
.verticalmenu {
	position:	fixed;
	top:		50%;
	right:		0;
	z-index:	1;
	box-shadow:	0 1rem 2.5rem rgba(0,0,0,0.1);
	transform:	translateY(-50%);
}
.verticalmenu > pure-button {
	display:	block;
	font-size:	1.5rem;
	box-shadow:	none;
}



/* SIDE MENU (READY) */
.slidemenu {
	position:		fixed;
	width:			100%;
	height:			100%;
	z-index:		2;
	pointer-events:	none;
}
.slidemenu.on {
	cursor:			not-allowed;
	pointer-events:	auto;
}
.slidemenu > div {
	position:	fixed;
	right:		0;
	width:		10rem;
	height:		100%;
	background:	#FFF;
	transition:	all 0.25s ease;
	transform:	translateX(10rem);
	cursor:		auto;
}
.slidemenu.on > div {
	box-shadow:	0 2.5rem 5rem rgba(0,0,0,0.1);
	transform:	none;
}
.slidemenu.on ~ #app {
	left:	-5rem;
}