body.view-pagesheet{
	display: flex;
	flex-direction: row;
	align-items: stretch;
	background: var(--bg-main);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	--sidebar-width-expanded: 250px;
	--sidebar-width-collapsed: 52px;
	--sidebar-width: var(--sidebar-width-expanded);
}
body.sidebar-collapsed{
	--sidebar-width: var(--sidebar-width-collapsed);
}

#sidebar, #content{
	min-height: 100vh;
}

#sidebar{
	display: grid;
    grid-template-rows: auto 1fr auto;
	box-sizing: border-box;
	padding-bottom: 48px;
	background: var(--bg-sidebar);
}
	#sidebar header{
		margin-top: 10px;
		width: inherit;
	}
		#sidebar header > .logo{
			height: 38px;
			background-image: var(--logo-sidebar);
			background-position: center;
			background-repeat: no-repeat;
		}
	#sidebar main{
		margin-top: 10px;
		flex: 1 1 0%;
		width: inherit;
	}
		#sidebar main .background{
			position: fixed;
			width: inherit;
			height: 100vh;
			background: var(--bg-sidebar);
		}
		#sidebar main li{
			position: relative;
			list-style: none;
			padding: 0;
		}
		#sidebar main li:before{
			content: none;
		}
			#sidebar main li > .item{
				display: grid;
				position: relative;
				grid-template-columns: auto 1fr auto;
				padding: 0 0 0 var(--size-3);
				text-decoration: none;
				cursor: pointer;
			}
				#sidebar main li.selected{
					background: var(--color-5);
				}

				#sidebar main li > .item > *{
					color: #FFF;
					opacity: .65;
					height: 44px;
					line-height: 44px;
					transition: 
						color .3s,
						opacity .3s;
				}
				#sidebar main li:hover > .item > *,
				#sidebar main li.selected > .item > *,
				#sidebar main li .item.marked > .icon,
				#sidebar main li .item.marked > .label{
					opacity: 1;
				}
						#sidebar main li .item.marked:before{
							content: '';
							position: absolute;
							right: 0;
							width: 6px;
							height: 100%;
							background: var(--color-5);
							left: 0;
						}
					#sidebar > main li .item > .icon{
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: -2px;
						width: 20px;
						font-size: 16px;
					}
					#sidebar main li .item > .label{
						margin-left: 10px;
						white-space: nowrap;
					}
					#sidebar main li .item > .arrow{
						display: none;
					}
					#sidebar main li.has-childs > .item > .arrow{
						position: absolute;
						display: flex;
						right: 0;
						padding: 0 16px;
						cursor: pointer;
						transition: 
							color .3s,
							opacity .3s,
							transform .25s ease-in-out;
						font-size: 12px;
						transform: rotate(-90deg);
					}
						#sidebar main li.has-childs > .item > .arrow:before{
							line-height: 44px;
						}
						#sidebar main li.has-childs.expanded > .item > .arrow{
							transform: rotate(0deg);
						}
			#sidebar main li > .container{
				background: rgba(0, 0, 0, .25);
				overflow: hidden;
				max-height: 0;
				box-shadow: 
					inset 0px 8px 10px -10px rgba(0, 0, 0, .75),
					inset 0px -8px 10px -10px rgba(0, 0, 0, .75);				
				transition: 
					max-height .3s cubic-bezier(0, 1, 0, 1) .1s,
					width .5s ease,
					opacity .5s ease;
			}
				#sidebar main li.expanded > .container{
					max-height: 9999px;
					transition: 
						max-height .3s cubic-bezier(1, 0, 1, 0),
						width .5s ease,
						opacity .5s ease; 
				}
					#sidebar main li li .item *{ 
						line-height: 36px;
						height: 36px;
					}
			#sidebar main li .item > .label,
			#sidebar main li .item > .arrow{
				transition: opacity .5s ease-in;
			}
		#sidebar main .break{
			margin: 4px var(--size-2);
			height: 1px;
			background: var(--color-12);
			opacity: .15;
		}
	#sidebar footer{
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		width: inherit;
		background: var(--bg-sidebar);
	}
		#sidebar footer > .collapse{
			padding: 16px 19px;
			color: #FFF;
			font-size: 16px;
			line-height: 16px;
			opacity: .65;
			transition: opacity .3s ease-in;
			cursor: pointer;
		}
			#sidebar footer > .collapse:hover{
				opacity: 1;
			}

		#sidebar footer > .version{
			color: #FFF;
			opacity: .4;
			white-space: nowrap;
		}
	
#content{
	display: grid ;
	grid-template-rows: auto auto 1fr auto;
	width: 100%;
	transition: width 0.5s ease-in;
}
	#content > header{
		position: relative;
		height: 48px;
		background: #FFF;
		box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
	}
		#content > header .menu{
			display: flex;
			height: inherit;
			margin-right: 15px;
			justify-content: flex-end;	
		}
			#content > header .menu > .button{
				position: relative;
				display: flex;
				padding: 0 12px;
				align-items: center;
				color: var(--color-text);
				font-size: 22px;
				line-height: 48px;
				cursor: pointer;	
				transition: all .3s ease-in;
			}
				#content > header .menu > .button:before{
					text-shadow: 0px 0px 1px rgba(0, 0, 0, .5);
				}
				#content > header .menu > .button:hover{
					background: var(--color-8);
				}
					#content > header .menu .user .photo{
						margin-right: var(--size-1);
						width: 38px;
						height: 38px;
						background: #F6F6F6;
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;						
						border-radius: 100%;
					}
	#content > section{
		display: flex;
		align-items: stretch;
		background: var(--color-12);
		padding: var(--size-2) calc(var(--size-4) + 10px) 0 var(--size-4);
	}	
		#content > section > *{
			display: flex;
			flex-grow: 1;
			flex-direction: column;
			justify-content: end;
		}
		
		#content > section .right:empty{
			flex-grow: 0;
		}

		#content > section .breadcrumbs{
			grid-column: 1 / span 2;
			max-height: var(--size-4)px;
			padding-bottom: var(--size-1);
		}
			#content > section .breadcrumbs,
			#content > section .breadcrumbs *{
				font-size: 13px;
			}
			#content > section .breadcrumbs a{
				color: rgba(0, 0, 0, .45);
				text-decoration: none;
				transition: color .3s ease-in;
			}
				#content > section .breadcrumbs a:hover{
					color: rgba(0, 0, 0, .85);
				}
		#content > section .header{
			font-size: 20px;
			font-weight: 500;
			padding-bottom: var(--size-2);
		}
		#content > section .header.title .fas{
			font-size: 16px;
		}
		#content > section .content{
			padding-bottom: var(--size-2);
		}
		#content > section .ºbutton.round{
			width: var(--size-6);
			height: var(--size-6);
		}
			#content > section .ºbutton.round::before{
				font-size: var(--size-3);
			}
	#content > main{
		padding: var(--size-4) calc(var(--size-4) + 10px) var(--size-4) var(--size-4);
	}

	#content > footer{
		position: fixed;
		bottom: 0;
		width: calc(100% - var(--sidebar-width));
		background: var(--color-12);
		transition: width .5s ease-in;
	}


/* Sidebar animation */
#sidebar{
	--sidebar-width: var(--sidebar-width-expanded);
	
	width: var(--sidebar-width-expanded);
	transition: width .5s ease-in;
}
	.sidebar-collapsed #sidebar{
		--sidebar-width: var(--sidebar-width-expanded);
		width: var(--sidebar-width-collapsed);
	}
		.sidebar-collapsed #sidebar header > .logo{
			background-image: var(--logo-sidebar-small);
		}
		.sidebar-collapsed #sidebar main li .item > .label,
		.sidebar-collapsed #sidebar main li .item > .arrow{
			opacity: 0;
		}
		.sidebar-collapsed #sidebar main li.expanded > .container{
			max-height: 0;
			opacity: 0;
		}
		.sidebar-collapsed #sidebar main li.has-childs:hover > .container{
			position: absolute;
			margin: -44px 0 0 56px;
			padding: var(--size-1) 0;
			max-height: none;
			background: var(--bg-sidebar);
			border-radius: var(--control-border-radius-2);
			opacity: 1;
			z-index: 100;
		}
			.sidebar-collapsed #sidebar main li.has-childs:hover > .container .item{
				padding: 0 var(--size-5) 0 var(--size-3);
			}
				.sidebar-collapsed #sidebar main li.has-childs:hover > .container .item > *{
					opacity: .65;
					transition: 
						color .2s,
						opacity .3s,
						margin-left .3s;
				}	
					.sidebar-collapsed #sidebar main li.has-childs:hover > .container .item:hover > *,
					.sidebar-collapsed #sidebar main li.has-childs:hover > .container li.selected .item > *{
						opacity: 1;
					}
					.sidebar-collapsed #sidebar main li.has-childs:hover > .container .item > .label{
						padding-right: var(--size-3);
					}
						.sidebar-collapsed #sidebar main li.has-childs:hover > .container .item .fa-undefined{
							width: 0px;
						}
			
		.sidebar-collapsed #sidebar main > li > .item > .label{
			transition: none;
		}
			.sidebar-collapsed #sidebar main > li:hover > .item > .label{
				margin: 6px 28px;
				padding: 0 var(--size-3);
				height: 32px;
				line-height: 32px;
				background: var(--bg-sidebar);
				border-radius: var(--control-border-radius-2);
				opacity: 1;
				z-index: 100;
				transition: 
					opacity .3s ease-in-out 1s;
			}
				.sidebar-collapsed #sidebar main > li:hover > .item > .label::before{
					content: '';
					position: absolute;
					margin: 8px 0 0 -22px;
					width: 16px;
					height: 16px;
					background: var(--bg-sidebar);
					transform: rotate(45deg);
				}
			.sidebar-collapsed #sidebar main > li.has-childs > .item > .label{
				opacity: 0;
			}
		
#content.fixed .wrapper{
	margin: 0 auto;
	max-width: 1200px;
}
	#content.fixed > header .menu{
		margin-right: 0;
	}

#content > section .ºtab{
	margin-top: auto;
}

.badge{
	position: absolute;
	top: 0;
	right: 0;
	padding: 0 8px;
	height: 20px;
	font-size: 12px;
	line-height: 20px;
	background: #ff4d4f;
	color: #FFF;
	border-radius: 10px;
	transform: translate(30%, 5%);
	transform-origin: 100% 0;
	z-index: 1;
}

.flag{
	width: 22px !important;
	height: 22px;
	background: url(image/flags.png) no-repeat;
	border-radius: 100%;
}
	.flag.round{
		border-radius: 100%;
		box-shadow: 0px 0px 7px var(--control-border-color);
	}
	.flag.es{ background-position: 0 0; }
	.flag.en{ background-position: 0 -22px; }
	.flag.it{ background-position: 0 -44px; }
	.flag.tr{ background-position: 0 -66px; }
	.flag.pt{ background-position: 0 -88px; }
	.flag.fr{ background-position: 0 -110px; }
	.flag.de{ background-position: 0 -132px; }
	.flag.ro{ background-position: 0 -154px; }
	.flag.ct{ background-position: 0 -176px; }
	.flag.cn{ background-position: 0 -198px; }
	.flag.pl{ background-position: 0 -220px; }