/*
 * Atlas of Psychedelic Research - v2.1.0
 * 
 * First developed by Onno Smits - 01-01-2022
 *
 * CHANGELOG
 * v2.1.0 - 08-02-2022
 * Added option to hide/show list modal on mobile (<990px wide) screens
 *
 * Note: See commented variables for values you'll likely want to edit.
 *
 */
 
/*
 * Styling variables
 */
:root {
	/* STYLE */
		--border-radius: 0px;
	
	/* FONTS */
		--header-font: 20px/24px 'Roboto', sans-serif;
		--body-font: 14px/14px 'Open Sans', sans-serif;
	
	/* COLOURS */
		/* Solid */
		--black: #000000;
		--white: #FFFFFF;
		--marine: #173059;
		--cobalt: #0053BA;
		--blue: #14B7EB;
		--turquoise: #54E7B2;
		--light-gray: #D6E7EB;
		--pink: #FF53A5;
		
		/* Slightly Seethrough (90%) */
		--black-ss: #000000E6;
		--white-ss: #FFFFFFE6;
		--marine-ss: #173059E6;
		--cobalt-ss: #0053BAE6;
		--blue-ss: #14B7EBE6;
		--turquoise-ss: #54E7B2E6;
		--light-gray-ss: #D6E7EBE6;
		--pink-ss: #FF53A5E6;
		
		/* Half Seethrough (60%) */
		--black-hs: #00000099;
		--white-hs: #FFFFFF99;
		--marine-hs: #17305999;
		--cobalt-hs: #0053BA99;
		--blue-hs: #14B7EB99;
		--turquoise-hs: #54E7B299;
		--light-gray-hs: #D6E7EB99;
		--pink-hs: #FF53A599;
		
		/* Almost Seethrough (20%) */
		--black-as: #00000033;
		--white-as: #FFFFFF33;
		--marine-as: #17305933;
		--cobalt-as: #0053BA33;
		--blue-as: #14B7EB33;
		--turquoise-as: #54E7B233;
		--light-gray-as: #D6E7EB33;
		--pink-as: #FF53A533;
	
}

#atlas-map { 
	height: 75vh; /* Height of the map */
	box-sizing: content-box;
}
#atlas-map-templates {
	display: none;
}
#atlas-map .leaflet-top.leaflet-left {
	width: 100%;
}
#atlas-map .list.leaflet-control {
	font: var(--body-font);
	color: var(--marine);
	width: 350px; /* Width of the List modal */
	height: 525px; /* Height of the List modal */
	margin-left: 70px; /* How far from the left edge */
	background: transparent;
	box-shadow: 0 0 15px var(--black-as);
	border-radius: var(--border-radius);
	/*overflow: hidden;*/
	box-sizing: content-box;
}
#atlas-map .list.leaflet-control.hidden {
	display:none!important;
}

#atlas-map .minimize-button {
	cursor: pointer;
	position: absolute;
    background: var(--white);
    border-radius: 10px;
    width: 20px;
    height: 10px;
    top: -10px;
    padding: 10px 5px;
    right: -10px;
	display:none;
}

#atlas-map .minimize-button .dash {
	margin: -10px -1px;
    font-size: 0.9rem;
}

#atlas-map .minimized-controls.leaflet-control {
	margin-top: 3vh;
	display:none;
}
#atlas-map .minimized-controls.leaflet-control #show_atlas_controls {
	background: var(--white-ss);
    padding: 10px;
    color: var(--black);
    text-decoration: none;
}
#atlas-map .minimized-controls.leaflet-control #show_atlas_controls:hover {
	background: var(--white);
}

/* for smaller screens adjust leaflet */
@media (max-width: 990px) {
	
	#atlas-map .list.leaflet-control {
		width: 80vw; /* Width of the List modal */
		height: 60vh; /* Height of the List modal */
		margin-top: 5vh;
		margin-left: 7.5vw;
	}
	#atlas-map .minimize-button {
		display:block;
	}
	#atlas-map { 
		height: 85vh; /* Height of the map */
	}
}

#atlas-map .list-filter-counter {
    line-height: 3.1rem;
    font-size: 13px;
    opacity: 0.8;
}

#atlas-map .info-back-full,
#atlas-map .info-back-filtered {
	padding: 5px 5px 0;
	font-size: 13px;
	cursor: pointer;
	border-radius: var(--border-radius);
	display: none;
}
#atlas-map .list .list-header {
	background-color: var(--white-ss);
	border-radius: var(--border-radius) var(--border-radius) 0 0;
	border-bottom: 2px solid var(--pink-ss); /* Accent color border */
}
#atlas-map .list .list-header .list-header-title {
	font: var(--header-font);
	padding: 6px 8px;
	height: 146px;
	line-height: 38px;
	box-sizing: content-box;
}
#atlas-map .list .list-header .list-filter-title {
	font: var(--body-font);
	font-weight: bold;
    padding: 0 0 0 1px;
}
#atlas-map .list .list-box {
	padding: 10px 10px;
	height: calc( 100% - 180px );
	background: var(--light-gray-ss);
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	overflow-x: hidden;
	overflow-y: scroll;
	box-sizing: content-box;
}
#atlas-map .list .list-box .list-entry {
	background: var(--white-ss);
	box-shadow: 0 0 5px var(--black-as);
	margin: 0 0 10px 0;
	padding: 6px;
	position: relative;
	cursor: pointer;
	border-radius: var(--border-radius);
}
#atlas-map .list .list-box .list-entry:hover {
	background: var(--white);
	box-shadow: 0 0 10px var(--black-as);
}
#atlas-map .list .list-box .list-entry .list-entry-title {
	font-weight: 600;
	margin-bottom: 16px;
}
#atlas-map .list .list-box .list-entry .list-entry-type {
	position: absolute;
	bottom: 3px;
	font-style: italic;
}
#atlas-map .list .list-box .list-entry .list-entry-recruiting {
	position: absolute;
    right: 2px;
    bottom: 2px;
}


#atlas-map .entry.leaflet-control {
	font: var(--body-font);
	color: var(--marine);
	width: 90%; /* Width of the Entry modal */
	height: 525px; /* Height of the Entry modal */
	margin-left: 5%; /* This should be ( (100% - width) / 2 ) to be centered */
	background: transparent;
	box-shadow: 0 0 15px var(--black-as);
	border-radius: var(--border-radius);
	overflow: hidden;
	box-sizing: content-box;
}
#atlas-map .entry .entry-block {
	height: 100%;
	background: var(--white-ss);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	box-sizing: content-box;
}
#atlas-map .entry .info-back-full:hover,
#atlas-map .entry .info-back-filtered:hover {
	text-decoration: underline;
}
#atlas-map .entry .entry-block .entry-header {
	padding: 6px 8px;
	font-size: 20px;
	line-height: 1;
	font-weight: 600;
	border-bottom: 2px solid var(--pink-ss); /* Accent color border */
}
#atlas-map .entry .entry-block .entry-header [data-entry-var="research-type"] {
	margin-top: 5px;
	font-size: 17px;
	font-weight: 400;
}
#atlas-map .entry .entry-block .entry-box {
	padding: 10px 10px;
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	overflow-x: hidden;
	overflow-y: auto;
	flex: 1;
}
#atlas-map .entry .entry-block .entry-box h1 {
	font: var(--header-font);
	font-size: 18px;
	font-weight: 900;
	color: var(--marine);
}
#atlas-map .entry .entry-block .entry-box h2 {
	font: var(--header-font);
	font-size: 18px;
	color: var(--marine);
	margin-top: 3px;
}
#atlas-map .entry .entry-block .entry-box h3 {
	font: var(--header-font);
	font-size: 16px;
	color: var(--marine);
	margin-top: 8px;
	margin-bottom: 0;
}

#atlas-map .entry .entry-block .entry-box .col-lg-3 {
	cursor: default;
}

#atlas-map .marker-cluster-small,
#atlas-map .marker-cluster-small div,
#atlas-map .marker-cluster-medium,
#atlas-map .marker-cluster-medium div,
#atlas-map .marker-cluster-large,
#atlas-map .marker-cluster-large div {
	background-color: var(--cobalt-hs); /* Accent color of the clusters */
}

h2 {
	font: var(--header-font);
	color: var(--marine);
	font-size: 27px;
	margin-top: 10px;
}

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

a:hover {
	color: var(--turquoise);
}


div {
	font-size: 15px;
	line-height: 1.4em;
}

/* buttons that lead out of atlas */

.btn-primary {
	border-radius: 0px;
	background-color: var(--marine);
	border-color: var(--marine);
}

a.btn-primary {
	color: #fff;
}

.btn-secondary {
	border-radius: 0px;
	background-color: var(--turquoise);
	border-color: var(--turquoise);
}

a.btn-secondary {
	color: #fff;
}

/* info badges */

.badge-atlas {
	color: #fff;
    background-color: var(--marine);

}

/* menu styling */

.navbar-nav {
	font: var(--header-font);
    color: var(--marine);
    font-size: 20px;
    margin-top: 10px;
}

.nav-link {
	color: var(--marine);
}