* {
		box-sizing: border-box;
}
:root {
	--background: rgb(245 245 245);
	--color: rgb(0 0 0);
	--font: 500 18px/1.3em -apple-system, "helvetica neue", arial, sans-serif;
	--gap: 10px;

	--boxShadow: rgb(0 0 0 / 40%) 0 0 2px;
	--buttonBackground: rgb(24 49 83);
	--buttonFont: 600 18px/1em bold -apple-system, "helvetica neue", sans-serif;
	--buttonLinear: linear-gradient(to bottom, rgb(84 109 143) 0, rgb(24 49 83) 100%);
	--buttonBackgroundDelete: rgb(133 49 24);
	--buttonLinearDelete: linear-gradient(to bottom, rgb(153 69 44) 0, rgb(93 9 0) 100%);
	--buttonForeground: rgb(255 255 255);
	--buttonBackgroundActive: rgb(0 0 0);
	--buttonBackgroundPressed: rgb(0 0 0);
	--buttonShadow: rgb(0 0 0 / 80%);
	--buttonBorder: 1px solid rgb(0 0 0 / 50%);
	--buttonPadding: 12px;
	--buttonHeight: 44px;
	--buttonRadius: 6px;
	
	--headerHeight: var(--buttonHeight);
	--headerBackground: rgb(255 255 255);
	--headerShadow: rgb(0 0 0 / 20%) 0 0 10px;
	--headerH1: 22px;
	
	--linkColor: var(--buttonBackground);
	
	--inputBackground: rgb(255 255 255 / 80%);
	--inputBorder: 1px solid rgb(0 0 0 / 50%);
	--inputColor: rgb(0 0 0);
	--inputFont: var(--buttonFont);
	--inputHeight: var(--buttonHeight);
	
	--listletBackground: rgb(255 255 255);
	--listletPadding: 10px;
}

html,
body {
	background: var(--background);
	color: var(--color);
	display: grid;
	font: var(--font);
	gap: var(--gap);
	grid-template-areas: 'header header' 'lists main';
	grid-template-columns: minmax(200px, 300px) auto;
	grid-template-rows: calc(var(--headerHeight) + (var(--gap) * 2)) auto;
	height: 100vh;
	margin: 0;
	overflow: hidden;
	width: 100vw;
}

/* *********************** GRIDS *********************** */

header {grid-area: header;}
#lists {grid-area: lists;}
main {grid-area: main;}

/* *********************** HEADER *********************** */

header {
	background: var(--headerBackground);
	box-shadow: var(--headerShadow);
	display: grid;
	grid-template-columns: repeat(2, auto);
}

h1 {
	font-size: var(--headerH1);
	font-weight: 800;
	line-height: var(--headerHeight);
	margin: 10px;
	padding: 0;
}

header ul {
	display: flex;
	float: right;
	list-style: none;
	margin: 10px;
	padding: 0;
}

/* *********************** LISTS *********************** */

#lists ul {
	list-style: none;
	margin: 0 0 var(--gap);
	padding: 0;
}

#lists ul li {
	margin: 0 0 var(--gap) var(--gap);
}

#lists a {
	background: rgb(0 0 0 / 5%);
	border-radius: var(--buttonRadius);
	color: rgb(0 0 0 / 60%);
	display: block;
	height: var(--buttonHeight);
	font: var(--buttonFont);
	padding: var(--buttonPadding);
	text-align: left;
	text-decoration: none;
}

#lists a span {
	background: rgba(0 0 0 / 10%);
	border-radius: 18px;
	display: block;
	float: right;
	font-size: 12px;
	min-width: 22px;
	padding: 0 10px;
	text-align: center;
}

/* *********************** MAIN *********************** */

main {
	overflow-y: scroll;
}

main>ul {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 700px;
}

main>ul>li {
	border-bottom: 1px rgb(0 0 0 / 10%) solid;
	display: grid;
	gap: var(--gap);
	grid-template-areas: 'gHead phone' 'category address' 'rating rating';
	padding: calc(var(--gap) * 2) 0;
}

main p {
	margin: 0;
}

main h3 {
	font-size: 18px;
	grid-area: gHead;
	margin: 0;
}

main address {
	grid-area: address;
	text-align: right;
}

main .phone {
	grid-area: phone;
	text-align: right;
}

main .category {
	grid-area: category;
}

main .mapLinkHolder {
	grid-area: mapLinkHolder;
	text-align: right;
}

main .priceRange {
	grid-area: priceRange;
}

	main .priceRange strong {
		display: block;
	}

main .rating {
	grid-area: rating;
	text-align: right;
}

/* *********************** MODAL *********************** */

#modal {
	position: absolute;
}

/* *********************** DEFAULTS *********************** */

[aria-hidden="true"] {
	visibility: hidden;
}

/* *********************** LOGIN FORM *********************** */

#login {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
}

	#login p {
		margin: 0;
	}
	
	#login input {
		width: 215px;
	}

/* *********************** INPUT *********************** */

label {
	font-weight: 600;
}

input,
textarea,
select {
	background: var(--inputBackground);
	border-radius: 6px;
	border: var(--inputBorder);
	box-sizing: border-box;
	color: var(--inputColor);
	font: var(--inputFont);
	font-weight: normal;
	height: var(--inputHeight);
	padding: 0 10px;
	
}

input:not([type=radio]),
select {
	padding: 0 10px;
}

label {
	display: block;
	margin: 0 0 5px;
}

/* *********************** BUTTONS *********************** */

a {
	color: var(--linkColor);
}

button,
a.button {
	background: var(--buttonBackground);
	background: var(--buttonLinear);
	border: var(--buttonBorder);
	border-radius: var(--buttonRadius);
	/* box-shadow: var(--boxShadow); */
	color: var(--buttonForeground);
	display: inline-block;
	height: var(--buttonHeight);
	font: var(--buttonFont);
	padding: var(--buttonPadding);
	text-align: center;
	text-decoration: none;
	text-shadow: var(--buttonShadow) 1px 1px 0;
	white-space: nowrap;
}
	button span,
	a.button span {
		display: none;
	}

	.delete {
		background: var(--buttonLinearDelete);
	}

button small,
.button small {
	display: inline-block;
	font-weight: 600;
	margin-left: 2px;
	vertical-align: top;
}

	.dualIcon {
		width: 74px;
	}
	
	.toFavoritesSmall {
		width: 64px;
	}

[data-grammarly-shadow-root] {display: none;}


/* *********************** MAP *********************** */

#map {
	display: none;
}


@media(max-width: 700px) {
	body {
		grid-template-areas: 'header' 'lists' 'main';
		grid-template-columns: 100%;
	}
	
	main {
		padding: 0 var(--gap) 100px;
	}
	
	#lists ul {
		display: flex;
		gap: var(--gap);
		list-style: none;
		margin: 0;
		padding: 0 var(--gap);
	}
	
	#lists ul li {
		margin: 0;
	}
	
#lists a {
	background: rgb(0 0 0 / 10%);
	border-radius: var(--buttonRadius);
	color: rgb(0 0 0 / 60%);
	display: block;
	height: var(--buttonHeight);
	font: var(--buttonFont);
	padding: var(--buttonPadding);
	text-align: center;
	text-decoration: none;
}

	#lists a span {
		display: none;
	}
}

@media(min-width: 1200px) {
	html,
	body {
		grid-template-areas: 'header header header' 'lists main map';
		grid-template-columns: minmax(200px, 300px) minmax(700px, auto) minmax(300px, auto);
		grid-template-rows: calc(var(--headerHeight) + (var(--gap) * 2)) auto;
		height: 100vh;
		margin: 0;
		overflow: hidden;
		width: 100vw;
	}

	#map {
		background: #eee;
		display: block;
		grid-area: map;
	}
	
	#lists ul {
		border: 1px solid rgb(0 0 0 / 10%);
		border-radius: var(--buttonRadius);
		margin: 0 0 0 var(--gap);
	}
	
	#lists ul li {
		margin: 0;
	}
	
	#lists ul li a {
		border-bottom: 1px solid rgb(0 0 0 / 5%);
		border-radius: 0;
	}
	
	#lists ul li:first-of-type a {
		border-radius: var(--buttonRadius) var(--buttonRadius) 0 0;
	}
	
	#lists ul li:last-of-type a {
		border-bottom: 0;
		border-radius: 0 0 var(--buttonRadius) var(--buttonRadius);
	}
	
	main ul>li {
		background: rgb(255 255 255);
		border-radius: var(--buttonRadius);
		border: 1px rgb(0 0 0 / 15%) solid;
		margin-bottom: var(--gap);
		padding: calc(var(--gap) * 2);
	}
}