:root {
	--blue: #5F9CFB;
	--blueish: #BBD4FE;
	--bluelight: #edf2fa;
	--bluedark: #3081FE;
	--green: #31D675;
	--grey: #9499A0;
	--greyish: #d1d5da;
	--greylight: #FAFAFA;
	--red: #FF0D0D;
	--yellow: #F8D91D;
	--purple: #7923EF;
	--purplelight: #D3C0D2;
	--black: #000;
}

body {
	font-family: Geomanist, Arial, sans-serif;
	font-size: 12px;
	color: #000;
	background-color: #EDF4F5;
	padding: 10px 20px 10px 20px;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 10px 0;
	font-family: Geomanist, Arial;
}

h1,
h2,
h3 {
	font-weight: 500;
}

li h3 {
    font-weight: 400;
	display:inline-table; 
	padding: 3px; 
	margin-top: 15px; 
} 
li h4 {
	font-weight: 400;
	font-size: 80%; 
	background-color: var(--greylight);
	display:inline-table; 
	padding: 3px; 
}
.listOfDates li, .listOfPeople li {
    font-size: 14px;
	margin: 15px; 
} 
a {
	border-bottom: 1px var(--greyish) dashed;
	text-decoration: none;
	color: black;
}

h1 a, 
h2 a, 
.menu-items a, 
.no_underline {
	border: 0;
}

h1 a {
	text-decoration: none;
	color: black;
	white-space: nowrap;
}
h2 a {
	text-decoration: none;
}

.menu-items .icon, .hidden {
	display: none;
}

label {
    position: relative;
    top: 25px;
    margin-left: 10px;
}
label[for=saveCheckin],
label[for=saveLatLng]{
    top: 14px;
    margin: 8px 0 8px 30px;
    font-size: 14px;
}
input, textarea {
    width: 100%;
    display: block;
    border: none;
    border-bottom: 1px solid var(--greyish);
    padding: 10px 10px 10px 30px;
    box-sizing: border-box;
    font-family: Geomanist, Arial;
    font-size: 14px;
    background-color: var(--greylight);
}
input[type=checkbox] {
    width: 2em;
    margin: 0;
    padding: 0;
    font-size: 1em;
}
button, input[type=submit], span.fakeButton {
    display: inline-block;
    background: var(--blue);
    color: #fff;
    width: auto;
    border: 1px solid var(--blue);
    border-radius: 5px;
    margin-top: 25px;
    margin-right: 20px;
    cursor: pointer;
    font-family: Geomanist, Arial;
    font-size: 14px;
}
button, input[type=submit] {
    padding: 15px 39px 15px 39px;
}
input[type=range] {
    width: 30%;
    display: unset; 
    padding: 0 10px 0 10px;
}
input[type=checkbox].medication {
    display: unset; 
}


span.fakeButton {
    padding: 17px 30px 17px 30px;
}
span.fakeButtonSmall {
    display: inline-block;
    background: var(--grey);
    color: #fff;
    width: auto;
    border: 1px solid var(--grey);
    border-radius: 5px;
    margin: 2px;
    cursor: pointer;
    font-family: Geomanist, Arial;
    font-size: 12px;
    padding: 3px 15px 3px 15px;
}
span.fakeButtonExtraSmall {
    display: inline-block;
    background: var(--purple);
    color: #fff;
    width: auto;
    border: 1px solid var(--purplelight);
    border-radius: 5px;
    margin: 2px;
    cursor: pointer;
    font-family: Geomanist, Arial;
    font-size: 12px;
    padding: 3px;
}
.other {
	font-family: "Courier New", Courier;
	font-size: 11px;
}

form {
    margin-bottom: 30px;
}
form h3 {
    margin: 25px 0 0 0;
}

.v {
	padding: 2px;
	border: 1px solid var(--greylight);
}

#mainMapTransparent {
	width: 490px;
	height: 470px;
	background-color: #fff;
	margin: 0 auto;
	border: 0;
	border-radius: 5px;
	box-shadow: 0px 3px 15px #deebed;
}

.menu-item i,
#footer i {
	color: var(--grey);
}

.menu-item {
	padding: 0 10px 0 10px;
}

table#top2000 {
    font-size: 14px;
}

table#top2000 tr.header td {
    color: var(--grey);
    white-space: nowrap;
}

table#top2000 .position, a.position {
    font-family: "Courier New", Courier;
	color: var(--blue);
    border: 1px solid white;
    background-color: var(--greylight);
    text-align: right;
}
table#top2000 td {
    padding: 3px 7px 3px 7px;
    border-bottom: 1px solid var(--bluelight);
}


@media only screen and (min-width: 1080px) {
	#container {
		width: 1080px;
		margin: 0 auto;
	}
	div.w100,
	div.w100c {
		width: 100%;
		overflow: hidden;
		display: flex;
	}
	#photos div.w100,
	#recap div.w100 {
		display: block;
	}
	div.w50:not(:first-child) {
		margin-left: 2%;
	}
	div.w50 {
		width: 50%;
		float: left;
	}
	h1 {
		font-size: 30px;
	}
	h2 {
		font-size: 24px;
	}
	h3 {
		font-size: 18px;
	}
	h4 {
		font-size: 16px;
	}
	#cijfers ul li span.stat,
	#weather ul li span.stat {
		line-height: 14px;
		font-size: 20px;
	}
	p,
	#photos p,
	.generalText p,
	.headerText {
		font-size: 14px;
		padding: 0;
	}
	
	.headerText {
		margin: 0 0 5px 38px;
	}
	#cijfers ul li,
	#weather ul li {
		font-size: 14px;
	}
	#cijfers ul li span.content,
	.locationText,
	#footer p {
		font-size: 12px;
	}
	.smallText {
		font-size: 11px;
	}
	.smallerText {
		font-size: 85%;
	}
	#cijfers ul li,
	#weather ul li {
		margin-bottom: 8px;
	}
	.iconbox {
		border-radius: 50%;
		display: inline-block;
		width: 24px;
		height: 24px;
		line-height: 24px;
		padding: 2px;
		float: left;
	}
	.iconbox img {
		width: 20px;
		height: 20px;
	}
	.locationTitle, .searchItem {
		margin: 5px 0 5px 30px;
	}
	.searchItemImg {
	    width: 75px;
	    height: 75px;
	}
	.locationText {
		margin: 0 5px 10px 30px;
	}
	#cijfers ul,
	#weather ul {
		padding-left: 45px;
		padding-top: 10px;
	}
	#cijfers ul li span.stat,
	#weather ul li span.stat {
		width: 50px;
		margin-left: -50px;
	}
	.timelocation {
		max-width: 40ch;
		overflow: hidden;
	}
	.recapImage {
		width: 100px;
		height: 100px;
		margin: 15px;
	}
	td.thing { padding: 10px 10px 0 10px; font-size: 15px; }
}

@media only screen and (max-width: 1079px) {
	/* For mobile phones: */
	#container {
		width: 100%;
		margin: 0 auto;
	}
	div.w100c,
	div.w100c div.w50 {
		width: 100%;
		display: block;
	}
	div.w50:not(:first-child) {
		margin-left: 0;
	}
	div.w50 {
		width: 48%;
		float: left;
		flex: 1;
	}
	#geoForm input {
	    width: 90%;
	}
	body {
		font-size: 30px;
	}
	h1 {
		font-size: 40px;
	}
	h2 {
		font-size: 36px;
	}
	h3 {
		font-size: 32px;
	}
	h4 {
		font-size: 30px;
	}
    li h4 {
	    font-size: 60%; 
	    margin: 0;
	    padding: 6px 12px 6px 12px;
    }
    input {
        padding-left: 55px;
        font-size: 30px;
    }
    input[type=range] {
        width: 30%;
        display: unset; 
        padding: 5px 10px 5px 10px;
        margin: 20px 80px 20px 0;
        transform: scale(1.3);
        transform-origin: 0 0;
    }
    input[type=checkbox].medication {
        display: unset; 
        padding: 0;
        margin: 0;
        transform: scale(1.3);
        transform-origin: 0 0;
    }
        label {
        top: 45px;
    }
    button, 
    input[type=submit], 
    span.fakeButton, 
    span.fakeButtonSmall,
    .listOfDates li, 
    .listOfPeople li {
        font-size: 30px;
    }
	p,
	#photos p,
	.generalText p,
	.headerText {
		font-size: 30px;
		padding: 0;
	}

	.headerText {
		margin: 0 0 5px 55px;
	}

	#cijfers ul li,
	#weather ul li,
	#cijfers ul li span.stat,
	#weather ul li span.stat {
		font-size: 30px;
	}
	#cijfers ul li span.content,
	.locationText,
	.smallText,
	.timelocation {
		font-size: 26px;
	}
	#cijfers ul li,
	#weather ul li {
		margin-bottom: 15px;
		margin-top: 10px;
	}
	.iconbox {
		border-radius: 50%;
		display: inline-block;
		width: 34px;
		height: 34px;
		line-height: 34px;
		padding: 2px;
		float: left;
	}
	.iconbox img {
		width: 30px;
		height: 30px;
	}
	.locationTitle, .searchItem {
		margin: 5px 0 5px 40px;
	}
	.locationText {
		margin: 0 5px 10px 40px;
	}
	#cijfers ul,
	#weather ul {
		padding-left: 60px;
	}
	#cijfers ul li span.stat,
	#weather ul li span.stat {
		width: 80px;
		margin-left: -80px;
	}
	.menu-items a.icon {
		float: right;
		display: block;
	}
	.menu-item {
		display: none;
		width: 100%;
	}
	.menu-item-responsive {
		position: relative;
		float: right;
		display: block;
		width: 100%;
		text-align: right;
		margin: 0 0 10px 0;
	}
	.timelocation {
		max-width: 20ch;
		overflow: hidden;
	}
	.recapImage {
		width: 90px;
		height: 90px;
	}
    .recapImage div {
        margin: 3px 0 0 0;
        font-size: 14px;
    }

	#cijfers ul li span {
		line-height: 1.3;
	} 
	td.thing { padding: 20px 10px 10px 10px; font-size: 38px; }
	
    table.statsGraph tr th, table.statsGraph tr td {
    	font-size: 20px;
        height: 120px;
    }
}



div.panel {
	overflow: hidden;
	margin: 10px 0 10px 0;
	padding: 20px;
	background-color: white;
	border-radius: 5px;
	box-shadow: 0px 3px 15px #deebed;
}
div.panel2 {
	margin: 10px 10px 10px 0;
	padding: 20px 20px 20px 0;
}
div.w99 {
	width: 99%;
	float: left;
	flex: 1;
}
div.line {
	overflow: hidden;
	border-radius: 5px;
	border: 1px solid var(--greylight);
	margin: 0 0 10px 0;
}
div.location,
div.generalText {
	padding: 5px 10px 2px 10px;
	margin: 5px 0 5px 0;
}
.textgrey {
	color: var(--grey);
}
.textgreyish {
	color: var(--greyish);
}
.textgreylight {
	color: var(--greylight);
}
.textblue {
	color: var(--blue);
}
.textbluelight {
	color: var(--bluelight);
	background: white; 
}
.textred {
	color: var(--red);
}
.textyellow {
	color: var(--yellow);
}
.textgreen {
	color: var(--green);
}
.textpurple {
	color: var(--purple);
}
.textblack {
	color: var(--black);
}
.iconbox i {
	text-shadow: 2px 2px 4px var(--greylight);
	color: white;
	margin-left: 2px;
    margin-top: 4px;
}
.bgblue {
	background-color: var(--blue);
}
.bgbluedark {
	background-color: var(--bluedark);
}
.bgbluelight {
	background-color: var(--bluelight);
}
.bgred {
	background-color: var(--red);
}
.bgyellow {
	background-color: var(--yellow);
}
.bggreen {
	background-color: var(--green);
}
.bgpurple {
	background-color: var(--purple);
}
.bgpurplelight {
	background-color: var(--purplelight);
}
.bggrey {
	background-color: var(--grey);
}
.bggreyish {
	background-color: var(--greyish);
}
.bggreylight {
	background-color: var(--greylight);
}
.like, li.pointer {
	cursor: pointer;
}
li.pointer {
    border-bottom: 1px solid var(--bluelight);
}
#cijfers ul,
#weather ul {
	list-style-position: outside;
}
#cijfers ul li span.stat,
#weather ul li span.stat {
	color: var(--blue);
	float: left;
	text-align: right;
	font-weight: 500;
	padding-right: 6px;
}
#cijfers ul li span.content {
	font-weight: normal;
}
.locationTitle {
	width: 100%;
	font-weight: normal;
}
.searchItem {
    width: 90%;
    font-weight: normal;
    line-height: 16px;
    font-size: 14px;
}
.locationTitle span, .searchItem span {
	font-weight: normal;
}
.locationTitle .time {
	float: right;
	text-align: right;
	margin-right: 35px;
}
p.inl {
	clear: both;
	float: left;
	padding: 3px;
}
.locationText a i {
	color: var(--grey);
}
.headerText {
	font-family: Geomanist, Arial;
}
.timelocation {
	float: right;
	text-align: right;
}
#menu .menu-items {
	color: var(--grey);
	text-align: right;
	float: right;
}
#photos .line {
	padding: 20px;
}
p,
#photos p,
.generalText p {
	font-family: Geomanist, Arial;
	padding: 10px 0 10px 0;
}
#photos .line p img {
	width: 75%;
	text-align: center;
	margin: 20px 10% 20px 10%;
}
#log {
	font-family: "Courier New", Courier;
	font-size: 10px;
	background-color: var(--bluelight);
}
p.profile_service {
    margin-top: 20px;
}

.info {
	border: 1px solid var(--grey);
	border-radius: 2px;
	margin: 10px 20px 10px 20px;
	padding: 5px;
	background-color: var(--bluelight);
}
.info i {
	margin: 0 10px 0 10px;
}
span.button, a.button {
	border: 1px solid var(--grey);
	border-radius: 5px;
	padding: 0 5px 0 5px;
	margin: 0 10px 0 10px;
	background-color: var(--greylight);
	cursor: pointer;
	font-size: 12px;
}
div.notification {
	border: 1px solid var(--grey);
	border-radius: 5px;
	margin: 0 0 10px 0;
	padding: 8px 10px 8px 0;
	background-color: white;
	overflow: hidden;
	font-size: 14px;
	width: 495px;
	float: right; 
}
div.notification .text {
	margin-left: 32px; 
	overflow: hidden;
	padding: 1px; 
}
div.notification .text a {
    text-decoration: underline;
    text-decoration-color: var(--blue);
    text-decoration-style: dashed;
}
div.closeNotification {
	width: 25px;
	float: left;
}
div.closeNotification i {
	color: var(--blue);
	padding-left: 10px;
}
a.closeNotification {
	color: var(--blue);
}
#nog_geen_inlog p {
	margin: 10px;
}
.form-control {
	float: right;
	margin-right: 150px;
}
.starRating {
	white-space: nowrap;
}
.starRatingNumeric {
	font-family: 'Kalam'; 
	font-size: 130%; 
	font-weight: normal;  
	font-style: normal; 
	line-height: 0.5;
	padding: 0 5px 0 5px; 
	color: var(--bluedark); 
	background-color: transparent; 
}
.starRatingNumeric i {
	font-size: 80%;
	color: var(--blue); 
}
#footer,
#footer p,
#footer p a {
	width: 100%;
	padding: 10px;
	text-align: right;
	text-decoration: none;
	border: 0
}
.friend i {
	color: var(--green); 
}
.friendNotVerified i {
	color: var(--red); 
}

.help-block:not(:empty) { border: 1px solid var(--grey); border-radius: 3px; padding: 5px; margin: 30px 5px 5px 5px; color: red; width: 100%; font-size: 15px; display: block;}

a .recapDate {
	margin: 5px 0 5px 0;
}

a .recapLocation {
	margin: 5px 0 5px 0;
}

a .recapLocation {
	font-size: 18px;
	color: var(--blue);
}

a .recapStats {
	font-size: 14px;
}

a .recapStats span {
	background-color: var(--greylight);
	padding: 0 7px 0 7px;
	margin: 0 5px 0 10px;
}

.recapImage {
	background-position: center;
	background-color: var(--blueish);
	border-radius: 5px;
	filter: grayscale(10%);
	margin: 5px 20px 5px 0;
	display: block;
	float: left;
}
.recapImage div {
    background-color: white;
    margin: 8px 0 0 0;
    text-align: center;
    padding: 1px;
}

ul.statsThing, ul#venuesToCheckInTo {
padding-left: 5px; 
font-size: 14px; 
}
ul.statsThing {
margin: 15px 0 30px 0; 
}
ul.statsThing li, ul#venuesToCheckInTo li {
padding: 3px 3px 3px 15px;  
}

table.order-table {
    margin: 25px 5px 25px 5px;
    width: 100%;
}
table.order-table tr {
    height: 40px; 
    border: 0px;
    border-bottom: 1px solid var(--greyish);
    padding: 2px 20px 0 10px;
    width: 450px;   
    width: 100%;
}

table.statsGraph {
    margin: 40px;
}

table.statsGraph tr th, table.statsGraph tr td {
    font-family: "Courier New", Courier;
	color: var(--purple);
	font-weight: normal;
	width: 15px;
	height: 15px;
	padding: 5px;
	--border: 1px solid var(--greylight);
}