:root{
	--mainbg:rgba(173,216,230,.7);
	--viewbarbg:rgba(0,0,255,.2);
	--lighttext:#435674;
	--mainbtnbordercolor:#8B97AA;
	--mainbtnbordercolor-active:#6B83A7;
	--mainbtnbg:#EFEFEF;
	--mainbtnbg-active:#9FBFE9;
	--subbtnbordercolor:#8FA1BE;
	--inputbg:#EFEFEF;
	--listwrappercolor:#A49FE9;
	--itemlinebg:#9FBFE9;
	--databg:#CDDEF4;
	--toastbg:#AE8FF1;
	--toasttext:#0E132A;
	--dialogbg:#B5C7ED;
	--dialogbordercolor:#7386ED;
}


body{
	min-height:100svh;
	width:100%;
	background:linear-gradient(135deg,#cf9aff,#95c0ff);
	display:flex;
	justify-content:center;
	margin:0;
}
.outside{
	margin:8px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	position:fixed;
	top:0;
}
.container{
	height:fit-content;
	background:var(--mainbg);
	padding:8px;
}



.ctop{
	border-radius:1.2rem 1.2rem 0 0;
	padding-bottom:0;
	position:sticky;
	top:8px;
	z-index:1;
}
.cbot{
	border-radius:0 0 1.2rem 1.2rem;
	padding-top:0;
	padding-bottom:4px;
	max-height:78svh;
	overflow-y:auto;
}


.viewbar{
	height:fit-content;
	width:100%;
	background:var(--viewbarbg);
	padding:1rem;
	box-sizing:border-box;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:1rem;
	border-radius:1rem;
	position:sticky;
}
.viewbtn{
	flex:auto;
	white-space:nowrap;
	padding:1rem;
	padding-bottom:.9rem;
	border-radius:1rem;
	color:var(--lighttext);
	border:4px, solid, var(--mainbtnbordercolor);
	font-size:1.3rem;
	overflow:hidden;
}

.sortbar{
	display:flex;
	justify-content:space-between;
	margin-top:4px;
	margin-bottom:-4px;
}
.sortbar > :first-child{
	margin-left:8px;
}
.sortbar > :last-child{
	margin-right:8px;
}
.sortbtn{
	width:min-content;
	border-radius:.8rem;
	border:3px solid var(--subbtnbordercolor);
}

.formbar{
	height:auto;
	width:100%;
	display:flex;
	justify-content:flex-end;
	padding-top:.5rem;
	padding-bottom:.5rem;
}
.inputtext, .inputselect{
	margin-right:16px;
	width:12ch;
	border-radius:.4rem;
	background:var(--inputbg);
}
#shop{
	width:18ch;
}
.addbtn{
	width:8ch;
	border-radius:.5rem;
	color:#435674;
	border:3px solid var(--subbtnbordercolor);
	padding:.2rem;
}


#grocerylist > :first-child{
	border-top:4px solid var(--listwrappercolor);
}
#grocerylist > :last-child{
	border-bottom:4px solid var(--listwrappercolor);
}
.iteminfo{
	display:flex;
	align-items:center;
	background:var(--itemlinebg);
	margin-bottom:4px;
	border-radius:1rem;
	padding:.4rem;
}
.itemdisplay{
	display:flex;
	flex:1;
}
.data{
	background:var(--databg);
	border-radius:.7rem;
	padding-top:.4rem;
	padding-bottom:.4rem;
	padding-left:.4rem;
	padding-right:.4rem;
	text-align:center;
	white-space:nowrap;
	margin-right:.5rem;
	align-content:center;
}
.imgbtn{
	width:24px;
	height:24px;
	vertical-align:middle;
	cursor:pointer;
	margin-right:.5rem;
}
.arrowdownsvg{
	rotate:180deg;
}
.qtyunit{
	width:8ch;
	overflow:hidden;
}
.item{
	width:stretch;
	white-space:wrap;
	word-break:break-word;
}
.shop{
	width:2ch;
}
.itemdisplay > :last-child{
	margin-right:0;
}



#toast-container{
	height:fit-content;
	width:fit-content;
	position:fixed;
	left:50%;
	transform:translate(-50%, 0);
	bottom:2.5rem;
}
.toast {
	background: var(--toastbg);
	color: var(--toasttext);
	padding: 0.5rem .8rem;
	border-radius: .8rem;
	font-size: 1rem;
	font-weight:bold;
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
	display:flex;
	justify-content:center;
	align-items:center;
	margin:.5rem;
	white-space:nowrap;
}
.toast.show {
	opacity: 1;
	transform: translateY(0);
}


dialog[open]{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:1.2rem;
	border-radius:3vw;
	height:10vw;
	width:40vw;
	background:var(--dialogbg);
	border:4px solid var(--dialogbordercolor);
	box-shadow:0px 0px 8rem 8rem rgb(92, 92, 92, .3);
}
dialog:not([open]){
	display:none;
}
dialog::backdrop{
	background:rgba(0,0,0,0.5);
}
dialog:focus{
	outline:none;
}
.dialoginputdiv{
	display:flex;
	gap:1vw;
}
.dialogbtns{
	display:flex;
	gap:1vw;
}
#qtyneededit, #unitedit, #itemedit, #shopedit{
height:3vw;
width:10vw;
font-size:2vw;
border:2px solid black;
border-radius:1.2vw;
text-indent:1vw;
}
#itemedit{
width:38vw;
text-align:center;
}
#shopedit{
height:3vw;
}
#unitedit{
height:3.4vw;
width:11vw;
border-radius:1.2vw;
}
#qtyneededit{
	translate:1vw 0;
}
#shopedit{
	width:max-content;
	translate:.6vw 0;
}
#closeBtn, #changebtn{
font-size:2vw;
border:3px solid var(--subbtnbordercolor);
border-radius:1.3vw;
padding:.3vw 1.8vw;
}


@media (max-width:870px){
	.viewbar{
		padding:.5rem;
	}
	.viewbtn{
		font-size:1rem;
		padding:.4rem;
		padding-bottom:.3rem;
	}


	/*dialog{
		transform:translateY(-10svh);
	}*/
	dialog[open]{
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		gap:1rem;
		border-radius:7vw;
		height:20vw;
		width:70vw;
		background:var(--dialogbg);
		border:4px solid var(--dialogbordercolor);
		box-shadow:0px 0px 8rem 8rem rgb(92, 92, 92, .3);
	}
	dialog:not([open]){
		display:none;
	}
	dialog::backdrop{
		background:rgba(0,0,0,0.5);
	}
	dialog:focus{
		outline:none;
	}
	.dialoginputdiv{
		display:flex;
		gap:1vw;
	}
	.dialogbtns{
		display:flex;
		gap:1vw;
	}
	#qtyneededit, #unitedit, #itemedit, #shopedit{
		height:6vw;
		min-width:18vw;
		font-size:4vw;
		border:2px solid black;
		border-radius:3vw;
		text-indent:1vw;
	}
	#itemedit{
		width:64vw;
		text-align:center;
	}
	#shopedit{
		height:7.5vw;
	}
	#unitedit{
		height:7.5vw;
		width:20vw;
		border-radius:3vw;
	}
	#qtyneededit{
		translate:0 0;
	}
	#shopedit{
		translate:0 0;
	}
	#closeBtn, #changebtn{
		font-size:4vw;
		border:3px solid var(--subbtnbordercolor);
		border-radius:3vw;
		padding:1vw 4vw;
	}
}

@media (max-width:660px) {
	.cbot{
		max-height:79svh;
	}
	.viewbar{
		gap:0.3rem;
		padding:.5rem;
	}
	.viewbtn{
		width:100%;
	}
	#costco{
		padding-right:.6rem;
	}
	.formbar{
		box-sizing:content-box;
		justify-content:center;
		gap:1rem;
	}
	.inputtext{
		width:8ch;
	}
	#unit{
		width:8ch;
	}
	#shop{
		width:8ch;
	}
	.inpt{
		margin:0;
	}
	.inputtext{
		text-indent:4px;
	}
	.item{
		width:0;
		flex:1;
	}
	.qtyunit{
		width:6ch;
	}
}

.visibilityhidden{
	visibility:hidden;
}