:root {
	--lightCardPicBorderColor: #494949;
	--contentBoxesBkgColor: rgb(255,255,255);
	--icoPhoneOffice: url(../images/contact-icons/office-phone.svg);
	--icoPhoneMobile: url(../images/contact-icons/mobile-phone.svg);
	--icoPhoneFax: url(../images/contact-icons/fax-phone.svg);
	--icoPhoneOther: url(../images/contact-icons/other-phone.svg);
}

:root.darkMode {
	--contentBoxesBkgColor: rgb(49,49,49);
	--icoPhoneOffice: url(../images/contact-icons/dark/office-phone.svg);
	--icoPhoneMobile: url(../images/contact-icons/dark/mobile-phone.svg);
	--icoPhoneFax: url(../images/contact-icons/dark/fax-phone.svg);
	--icoPhoneOther: url(../images/contact-icons/dark/other-phone.svg);
}

html body #inf-content .inf-card-view {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-gap: 10px;
}

html body #inf-content .inf-card-view .card {
	padding: 2%;
	display: grid;
	grid-template-columns: 30% 70%;
	grid-gap: 1%;
	max-width: 100%;
	cursor: pointer;
}

body #inf-content .inf-card-view .card {
	background-color: var(--contentBoxesBkgColor);
	box-shadow: 1px 1px 7px 2px rgba(0, 0, 0, .2);
}

html body #inf-content .inf-card-view .card .card-pic {
	background-image: url(/utils.images.ico-not-pictured.svg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	border: .5px solid var(--lightCardPicBorderColor);
	height: 110px;
	max-width: 100%;
}

html body #inf-content .inf-card-view .card .card-info {
	width: 97%;
}

html body #inf-content .inf-card-view .card .card-info .name {
	margin-bottom: 5px;
	font-size: 15px;
	font-weight: 500;
}
html body #inf-content .inf-card-view .card .card-info .company,
html body #inf-content .inf-card-view .card .card-info .child-names {
	margin-bottom: 5px;
	margin-top: -3px;
	font-size: 13px;
}
html body #inf-content .inf-card-view .card .card-info div {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
html body #inf-content .inf-card-view .card .card-info .emails .email {
	font-size: 12px;
	padding-left: 25px;
	background-repeat: no-repeat;
	background-size: 20px;
	line-height: 21px;
	background-position: 3px 0px;
}
html body #inf-content .inf-card-view .card .card-info .phone-numbers .phone {
	padding-left: 25px;
	background-repeat: no-repeat;
	background-size: 19px;
	height: 23px;
	line-height: 21px;
	background-position: 3px 1px;
}

body #inf-content .phone.work {
	background-image: var(--icoPhoneOffice);
}
body #inf-content .phone.cell {
	background-image: var(--icoPhoneMobile)
}
body #inf-content .phone.fax {
	background-image: var(--icoPhoneFax)
}
body #inf-content .phone.other {
	background-image: var(--icoPhoneOther)
}