json-map/css/style.css

@import "leaflet.css";
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	font-family: "Cantarell";
}

a {
	color: inherit;
	text-decoration: none;
}

input {
	height: 40px;
	border: solid;
	border-style: dashed;
	border-width: 1px;
	border-color: #EAEAEA;
	width: 90vw;
	text-align: center;
	margin: auto;
	display: block;
}

.item-info {
	display: none;
}

#main {
	display: grid;
	grid-template-rows: 30vh 70vh;
	grid-template-areas: "map" "detail";
	grid-gap: 0px;
}

#detail {
	grid-area: detail;
}

#container {
	display: grid;
	grid-gap: 0px;
	grid-template-rows: 10vh 10vh 50vh;
	grid-template-areas: "header" "subheader" "content";
}

#header {
	grid-area: header;
	padding: 10px;
}

#name {
	padding: 0px;
	margin: 0px;
	font-weight: bold;
	text-align: center;
}

#description {
	padding: 35px;
	text-align: justify;
}


/* Categories */

#subheader {
	grid-area: subheader;
}

.flex {
	width: 90vw;
	display: flex;
	margin: auto;
	align-items: center;
	overflow-x: auto;
}

.flex>* {
	margin: 5px;
	padding: 5px;
}

#categories {
	margin: auto;
}

#categories>button {
	border: solid;
	width: 100%;
	border-width: 1px;
	border-radius: 5px;
	border-color: #EAEAEA;
	background-color: white;
	max-height: 30px;
	white-space: nowrap;
}

#categories>li:hover {
	box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 12px;
}

#contact {
	justify-content: center;
}


/* Items */

#content {
	grid-area: content;
	overflow-y: auto;
}

#list>button {
	width: 90vw;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#list>button>div {
	margin-top: auto;
	margin-bottom: auto;
}

.item {
	display: flex;
	padding: 10px;
	margin: 10px;
	text-align: left;
	font-size:16px;
}

button {
	background-color: white;
	border: solid;
	border-width: 1px;
	border-radius: 5px;
	border-color: #EAEAEA;
}

button:hover {
	box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 12px;
}

button.selected {
	border-color: #666 !important;
	background-color: #666 !important;
	color: white;
}


/* Leaflet */

.leaflet-popup {
	top: -102px;
}


/* Icons */

#action {
	position: absolute;
	top: calc(30vh - 30px);
	right: 10px;
	width: 64px;
	height: 64px;
	border-radius: 50px;
	z-index: 1000;
	background-repeat: no-repeat;
}

.geo {
	background: url(../images/icon-gps.svg);
}

.suggestion {
	background: url(../images/icon-suggestion.svg);
}

.icon {
	display: block;
	height: 40px;
	width: 40px;
	margin: 5px;
	background-repeat: no-repeat;
}

.icon-care {
	background: url(../images/icon-care.svg);
	background-repeat: no-repeat;
}

.icon-gps {
	background-image: url(../images/icon-gps.svg);
}

.icon-phone {
	background-image: url(../images/icon-phone.svg);
}

.icon-facebook {
	background-image: url(../images/icon-facebook.svg);
}

.icon-mail {
	background-image: url(../images/icon-mail.svg);
}

.icon-close {
	border-style: none;
	background-image: url(../images/icon-back.svg);
}

.icon-close:hover {
	border-style: none;
}


/* Scrollbar */

 ::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

 ::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px #C4C4C4;
	border-radius: 2px;
}

 ::-webkit-scrollbar-thumb {
	background: dimgrey;
	border-radius: 10px;
}

 ::-webkit-scrollbar-thumb:hover {
	background: #B5B5B5;
}

@media ( max-height: 500px) {
	#main {
		grid-template-rows: 0vh 100vh;
	}
	#action {
		display: none;
	}
	#container {
		grid-template-rows: 30vh 0vh 70vh;
	}
	#categories,
	#contact {
		display: none;
	}
}

@media (min-width: 850px) {
	#main {
		grid-template-columns: 30vw 70vw;
		grid-template-areas: "detail" "map";
	}
	#container {
		grid-template-rows: 10vh 10vh 80vh;
		grid-template-areas: "header" "subheader" "content";
	}
	#content,
	#subheader,
	#header {
		width: 30vw;
	}
	input {
		width: 25vw;
	}
	#list>button {
		width: 25vw;
	}
	.flex {
		width: 25vw;
	}
	#action {
		top: 90px;
		left: calc(30vw - 30px);
	}
	#map {
		height: 100vh;
	}
}