.view-base{
	--width: 480px;
}
	.view-base h1{
		color: var(--color-12);
	}
	.view-base > *,
	.view-base .content > *,
	.view-base .ºcontainer{
		min-width: var(--width);
		box-sizing: border-box;
	}
		.view-base .ºlabel.message{
			width: var(--width);
		}
		.view-base > .menu{
			position: absolute;
			top: 0;
			padding: 0 var(--size-1);
			width: 100%;
			display: flex;
			justify-content: flex-end;
			height: var(--size-7);
			cursor: pointer;
		}
			.view-base > .menu .button{
				position: absolute;
				padding: 0 var(--size-2);
				height: inherit;
				display: flex;
				align-items: center;
				font-size: var(--size-4);
				color: var(--color-12);
			}
			.view-base > .menu .button .label{
				padding-left: var(--size-2);
				color: var(--color-12);
			}
		.view-base > .background{
			position: absolute;
			left: 0; right: 0; top: 0; bottom: 50%;
			background: var(--bg-color-5);
			z-index: -1;
		}
			.view-base > .background::before{
				content: '';
				position: absolute;
				top: 0; right: 0; 
				left: -120px; bottom: -240px;
				background: url('image/background_clouds.png') no-repeat center bottom;
			}		
		.view-base .logo{
			content: var(--logo);
			bottom: 0;
			width: 340px;
			margin-bottom: 24px;
			z-index: 1
		}
		.view-base .ºlayout,
		.view-base .ºcontainer{
			box-shadow: 
				0 3px 6px -4px rgba(0,0,0,.12),
				0 6px 16px 0 rgba(0,0,0,.08),
				0 9px 28px 8px rgba(0,0,0,.05);	
		}
		.view-base .ºlayout{
			width: auto;
			padding: var(--size-5) var(--size-6);
		}
		.view-base .ºcontainer{
			width: var(--width);
		}

.view-user_recovery > *{
	position: relative;
	top: -100px;
}
.view-user_recovery .content{
	width: var(--width);
}
.view-user_recovery .description{
	text-align: left;
	padding-bottom: var(--size-4);
}

.view-base.message{
	justify-content: end;
}
	.view-base.message > .background{
		display: flex;
		flex-direction: column;
		align-items: end;
		justify-content: center;
		bottom: 75%;
	}