:root {
	--green: hsl(95, 98%, 44%);
	--brown: hsl();
	--dgray:hsl(0, 0%, 20%);
	--mgray:hsl(0, 0%, 27%);
	--lgray:rgb(212, 212, 212);
	--bgwhite: #f1f2f3;
	--btncol:hsl();
	--btnbg:hsl();

	/* was 60, 5px */
	--menuh: 60px;
	--bh: 5px;
}

@font-face {
	font-family: worksansr;
	src: url(worksansr.ttf);
}


html {
    box-sizing: border-box;
    /* font-size: 100%; */
	color: var(--dgray);
	height: 100%;
	margin: 0;
	overflow: hidden;
	font-family: worksansr;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin:0;
    padding:0;
	height: 100%;
	overflow: hidden;
    /* background-color: #ffffff; */
}

h1 {
	margin: 0em;
}

button {
	font-family: worksansr;
	/* font-size: 0.9em; */
}

a:hover{
	cursor: pointer;
	text-decoration: none;}

/* map height */
#map {
    height: calc(100% - var(--menuh));
}

/* menu css */
.menubar {
	/* border-bottom: hsl(0, 0%, 20%) solid 1px; */
	background-color:#f1f2f3;
	display: flex;
	padding: var(--bh) 10px;
}

.flexaround{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
	width: 100%;
}

.holder {display: flex; align-items: center;}

.holder img {
	height: calc(var(--menuh) - calc(var(--bh) * 7));
}

.username {
	padding: 4px 8px;
	background-color: var(--lgray);
	color: var(--mgray);
	border-bottom: 2px solid var(--mgray);
	border-radius: 4px;
	font-size: 1.2em;
	margin-right: 4px;
	display: flex;
	align-items: center;
}
.username i {
	font-size: 0.85em;
}

/* menu links */
.link {
	position: relative;
	color:hsl(0, 0%, 15%);
	padding: 6px 4px;
	margin: 0px 8px;
	text-decoration: none;
}

/* Link hover animation */
/* https://tobiasahlin.com/blog/css-trick-animating-link-underlines/ */
.link::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--green);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.link:hover::before {
	transform: scaleX(1);
  }

/* menu title */
p.title {
	margin: 0em;
	padding: 7.5px;
	/* padding-left: 0.7em; */
	font-size: 1.66em;
	vertical-align: bottom;
}
p.title a{
	padding: 0em;
}
/* END menu styling */

#trackButton, #findButton {
	position: absolute;
	bottom: 10px;
	left: 4px;
	background-color: #f1f2f3;
	z-index: 1000;
}
#findButton {bottom: 54px;}
#addButton, #cancelButton, #confirmLocButton{
	position: absolute;
	right: 4px;
	bottom: 14px;
	background-color: #f1f2f3;
	z-index: 1000;
}

/* =====SPECIFIC buttons on map ui */
.new-UI {
	margin: 10px;
	background-color: #f1f2f3;
	border: none;
	padding: 10px;
	box-shadow: rgba(0,0,0,0.3) 0px 1px 4px -1px;
	overflow: hidden;
	cursor: pointer;
	border-radius: 4px;
	/* position: absolute; */
	/* top: 0;
	left: 0; */
}
.new-UI:hover {
	background-color: hsl(0, 0%, 90%);
}

.addmarkerbtn {
	/* font-size: 30px; */
	color: hsl(0, 0%, 22%);
	/* font-size: 1.2em; */
	/* border: 1px solid hsl(0, 0%, 70%); */
}

/* .btn-off, .btn-on {
	padding: 1em;
	border: none;
	background-color: #f1f2f3;
} */
.btn-on::after {
	display: inline;
	content: "On";
	color: darkgreen;
	font-weight: bold;
}
.btn-off::after {
	display: inline;
	content: "Off";
	color: darkred;
	font-weight: bold;
}

#cancelButton {
	/* content: "Cancel"; */
	right: 86px;
/*	visibility: hidden;*/
	/* border: 2px var(--mgray) solid; */
	/* border-radius: 5px; */
	display: none;
}
#confirmLocButton {
	/* content: "Confirm"; */
/*	visibility: hidden;*/
	/* border: 2px darkgreen solid; */
	background-color: darkgreen;
	color: #f1f2f3;
	display: none;

}
/* ==========END map buttons styling */

a {
	padding: 1em;
}



/*Form styling*/

form, .pop-up {
	display: none;
	background-color: white;
	position: fixed;
	padding: 2em;
	top: 50%;
	left: 50%;
	z-index: 1052;
  	-webkit-transform: translate(-50%, -50%);
  	-moz-transform: translate(-50%, -50%);
 	-ms-transform: translate(-50%, -50%);
 	-o-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
  	border-radius: 0.5em;
}

.side-img {
	max-width: clamp(6em, 6em + 2vw, 8em);
	margin: 1em;
}

.contact {
	/* font-size: clamp(0.6em,0.6em + 1vw,2.6em); */
	font-size: 1.7em;
	display: flex;
	justify-content: flex-start;
	/* padding: 0.7em 0.2em 1em 0.2em; */
	max-width: fit-content;
	margin: auto;
}

.contact a{
	padding:0 0.3em 0 0.3em;
	margin: 0.2em;
	color: hsl(0, 0%, 38%);
}

.contact a:hover {
	color: var(--green);
}

.contact::before, .contact::after{
	display: inline-block;
    content: '[';
    color: var(--green);
    /* font-weight: bold; */
    /* text-shadow: 0 0 1px var(--green), 0 0 2px var(--green),0 0 3px var(--green); */
}
.contact::after {content:']';}

section.paragraphs {
	margin-right: 1em;
}

/* .nametag {
	margin: 0;
	margin-right: 8px;
} */

li {
	list-style-type: none;
	/* padding: 0 6px 0 6px; */
}



/* .login input {
	width: 100%;
}

.login img {
	width: 5em;
	display: block;
	margin: auto;
	margin-bottom: 2em;
}

.full-width {
	width: 100%;
}

.login #submit {
	width: auto;
} */

.submit {
	background-color: mediumseagreen;
	color: var(--bgwhite);
	border: none;
	border-radius: 5px;
	padding: 7px 16px;
	text-align: center;
	text-decoration: none;
	/* display: inline-block; */
	font-size: 16px;
	float: right;
}
.submit:hover {
	background-color: #2e824a;
	cursor: pointer;
}

fieldset.nice-form-group{
	border: none;
}

#locUpdate {
	color: chocolate;
	padding: 8px;
	/* background-color: var(--bgwhite); */
	border: 1px solid chocolate;
	border-radius: 6px;
}


.option {
	padding: 0.2em;
}

#addMarkerForm {
	display: none;
}

label {
	margin-bottom: 0.4em;
}

form .flexaround{margin-bottom: 1em;}

.flexrow {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flex2 {
	padding: 0.2em;
	justify-content: flex-start;
}

label img{
	width: 2.5em;
}

/*https://stackoverflow.com/questions/17541614/use-images-instead-of-radio-buttons*/
/* HIDE RADIO */
label [type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
  padding: 4px;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  /* border: 1px solid var(--lgray); */
  background-color: var(--lgray);
  border-radius: 3px;
}

.cancel {
	display: inline;
	padding: 0.1em;
}

.align-right {
	display: flex;
	justify-content: flex-end;
	margin-top: 1em;
}
.moveMarker {
	padding: 7px 14px;
	border: 1px solid var(--lgray);
	margin-right: 10px;
	border-radius: 5px;
}
.moveMarker:hover{
	cursor: pointer;
	background-color: var(--lgray);
}
a.moveMarker i{
	padding-right: 6px;
}

#backdrop {
	display: none;
	z-index: 1051;
	width: 100%;
	height: 100%;
	position:fixed;
	left:0;
	top:0;
	background-color: rgba(10,10,10,0.6);
}




/*infowindow css*/
.leaflet-popup-content-wrapper {
	width: 280px;
}

.markerTitle {
	margin-right: 0.8em;
	max-width: 260px;
	white-space: initial;

}

.markerMenu {
	padding: 0px;
	display: flex;
	justify-content: center;
}

.markerMenu a{
	flex-basis: auto;
	flex-grow: 1;
	display: block;
	padding: 1em;
	border-right: solid 1px #444;
	border-top: solid 1px #444;
	border-bottom: solid 1px #444;
}
.markerMenu a li {
	list-style-type: none;
	text-align: center;	
}
.markerMenu a:first-child {border-left: solid 1px #444;}

.markerMenu a:hover {
	background-color: #EFEFEF;
}

.leaflet-container a.leaflet-popup-close-button{
	width: 50px;
	height: 60px;
}

.leaflet-container a {
	color: #333;
}

i.fa-trash-can {
	color: darkred;
}

a.map-link, a.web-link {
	border-radius: 4px;
	margin-top: 1em;
	display: block;
	text-decoration: none;
}

a.map-link {
	background-color: #318434;
	color: #f1f2f3;
	border: 2px solid #217434;
}
a.map-link:hover {background-color: #217434;}

a.web-link {
	background-color: #335C81;
	color: #f1f2f3;
	border: 2px solid #234C71;
}
a.web-link:hover {background-color: #234C71;}

.leaflet-popup-content p {
	margin-top: 0.3em;
}
.p-vis{ font-style:italic; }
.p-time { text-align:center; }

/*Notifications*/

.notification {
/*	display: none;*/
	z-index: 1050;
	position: fixed;
	top: calc(var(--menuh) * 2);
	left: 50%;
	padding: 1em;
	background: var(--lgray);
	border-radius: 1em;
	border: 1px solid var(--mgray);

	-webkit-transform: translate(-50%, -50%);
  	-moz-transform: translate(-50%, -50%);
 	-ms-transform: translate(-50%, -50%);
 	-o-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
}

/*STAR rating*/
.rating {
    float:left;
    width:300px;
}
.rating span { float:right; position:relative; }
.rating span input {
    position:absolute;
    top:0px;
    left:0px;
    opacity:0;
}
.rating span label {
    display:inline-block;
    width:45px;
    height:45px;
    text-align:center;
    color:#FFF;
	/* Star  https://css-shape.com/star/ */
	clip-path: polygon(50% 0,79% 90%,2% 35%,98% 35%,21% 90%); 
    background:#ccc;
    font-size:30px;
    margin-right:2px;
    line-height:30px;
    border-radius:50%;
    -webkit-border-radius:50%;
}
.rating span:hover ~ span label,
.rating span:hover label,
.rating span.checked label,
.rating span.checked ~ span label {
    background:#F90;
    color:#FFF;
}

/*shorten username on mobile*/
@media (max-width: 600px) {
	.mobile-truncate {
		max-width: 6ch;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		display: block;
	}

	form, .pop-up {
		min-width: 90%;
		margin: auto;
	}

	.side-img, .code {
		display: none;
	}

}