body{
	background-color: var(--gray_5);
	color: var(--gray_2);
	display: grid;
	font-family: Arial, sans-serif;
	grid-template-areas: "header header" "main aside";
	grid-template-columns: 1fr min-content;
	grid-template-rows: min-content 1fr;
	height: 100vh;
	margin: 0;
	overflow: hidden;
	place-items:center;
	width: 100vw}
	#header{
		align-content: center;
		box-sizing: border-box;
		display: grid;
		background-color: var(--green_1);
		box-shadow: var(--shadow);
		grid-area:header;
		grid-auto-columns: min-content;
		grid-gap: var(--m_gap);
		grid-template-columns: auto 1fr auto;
		grid-auto-rows: min-content;
		height: var(--header_height);
		overflow: hidden;
		padding: 0 var(--m_gap);
		width: 100vw}
		#header > .logo{
			align-self:center;
			color: var(--yellow_1);
			cursor: default;
			font-size: var(--xxl_font);
			font-weight: bold}
		/*#header > horizontal_menu{}*/
			#aside_button{
				display: none}
			#notifications_dropdown{
				width: 360px}
		        #notifications_list{
		          	max-height: 394px;
		          	min-height: 66px}
					#notifications_list > .a:first-child{
					  	border-radius: var(--s_gap) var(--s_gap) 0 0}
					#notifications_list > .a:last-child{
					    border-bottom: none;
					    border-radius: 0 0 var(--s_gap) var(--s_gap)}
					#notifications_list > .a:first-child:last-child{
						border-bottom: none;
					    border-radius: var(--s_gap)}
				        #notifications_list > .a > .time{
				            font-size: var(--s_font);
				            color: var(--gray_2)}
	#main{
		border-radius: var(--m_gap);
		display: grid;
		grid-area:main;
		grid-template-rows: min-content 1fr;
		grid-gap: var(--m_gap);
		height: var(--header_height_inverse);
		overflow: hidden;
		width: var(--aside_width_inverse)}
		#main > .header{
			align-items: center;
			display: grid;
			grid-template-areas: 'a b c';
			grid-template-columns: 1fr min-content min-content;	
			grid-auto-rows: min-content;
			grid-gap: var(--m_gap)}
			#main > .header > span{
				grid-area: a;
				font-size: var(--xl_font)}
			#main > .header > .input_container{
				grid-area: b}
			#main > .header > .horizontal_menu{
				grid-area: c}
		#main_list{
			display: grid;
			grid-auto-rows: min-content;
			grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
			grid-gap: var(--m_gap);
			overflow-y: scroll}
	#aside{
		display: grid;
		background-color: white;
		border-radius: var(--m_gap);
		box-shadow: var(--shadow);
		grid-area: aside;
		grid-template-areas: "a";
		height: var(--header_height_inverse);
		margin-right: var(--m_gap);
		overflow: hidden;
		position: relative;
		width: var(--aside_width);
		z-index: 50}
		#aside > div{
			grid-area: a;
			display: grid;
			grid-template-rows: min-content 1fr}
		#aside > div.off{
			display: none;}	
			#aside > div > .header{
				background-color: var(--green_2);
				display: grid;
				grid-auto-rows: min-content;
				grid-gap: var(--m_gap);
				padding: var(--m_gap)}
				#aside > div > .header > .tabbed{
					display: grid;
					grid-auto-flow: column;
					grid-auto-columns: min-content;
					grid-gap: var(--s_gap)}
					#aside > div > .header > .tabbed > span{
						box-sizing: border-box;
						color: var(--green_3);
						cursor: pointer;
						font-size: var(--s_font);
						font-weight: bold;
						padding: var(--m_gap)}
					#aside > div > .header > .tabbed > span.active{
						border-bottom: 3px solid var(--yellow_1);
						color: var(--yellow_1)}
				#aside > div > .header > .navigating{
					align-items: center;
					color: var(--yellow_1);
					display: grid;
					grid-template-columns: min-content 1fr;
					grid-gap: var(--s_gap)}
				#aside > div > .header > .options{
					display: grid;
					grid-template-columns: 1fr min-content;
					grid-gap: var(--s_gap)}
			#addresses_list{
				height: calc(100vh - 205px)}
				        #orders_list > div > .time{
				            font-size: var(--s_font);
				            color: var(--gray_2)}
			#order_list{
				height: calc(100vh - 198px)}
	#popup{
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
		background-color: rgba(0,0,0,0.1);
		display: grid;
		grid-auto-rows: min-content;
		grid-template-rows: 1fr;
		height: 100vh;
		overflow: hidden;
		place-items:center;
		position: absolute;
		width: 100vw;
		z-index: 200}
	#popup.off{
		display: none}
		#success_popup{ 
			background-color: var(--green_1);
			border: 2px solid var(--green_2);
			border-radius: var(--m_gap);
			display: grid;
			padding:var(--m_gap);
			place-items: center}
		#success_popup.off{
		 	display: none}
			#success_popup > svg{
				width:65%;
			    border-radius:50%;
			    stroke-width:2;
			    stroke:var(--green_2);
			    box-shadow:inset 0px 0px 0px var(--green_2);
			    animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}
				#cma{
			        stroke-dasharray:166;
			        stroke-dashoffset:166;
			        stroke-width:4;
			        stroke:var(--green_2);
			        animation:stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards}
			    #cmb{
			        transform-origin:50% 50%;
			        stroke-dasharray:48;
			        stroke-dashoffset:48;
			        stroke-width:4;
			        animation:stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards}
				@keyframes fill{
				    100%{box-shadow:inset 0px 0px 0px 20px var(--green_2)}}
				@keyframes scale{
				    0%,100%{transform:none}
				    50%{transform:scale3d(1.05, 1.05, 1)}}
				@keyframes stroke{
				    100%{
				        stroke-dashoffset: 0}}
@media(max-width: 900px){
body{
	grid-template-areas: "header" "main"}
	aside{display: none}
	/*#header{}*/
		/*#header > horizontal_menu{}*/
			#aside_button{
				display: grid}
	#main{
		width: var(--main_width)}
	#aside{
		border-radius: 0px;
		height: 100vh;
		right: 0;
		margin-right:0;
	    max-width: calc(100vw * 0.9);
		position: fixed;
		transition: transform 0.3s ease}
	#aside.off{
		box-shadow: none;
		transform: translateX(var(--aside_width))}
		#orders_list{
			height: calc(100vh - 120px)}
		#addresses_list{
			height: calc(100vh - 120px)
}
@media(max-width: 600px){
	#main > .header{
		grid-template-areas: 'a a' 'b c';
		grid-template-columns: 1fr min-content}
}}