html                    { height: 100%;}
body                    { height: calc(100% - 50px);margin:0;padding:0;}
div.body-content        { height: calc(100% - 20px);width: 100%;margin: 0;margin-top:50px;padding: 0;}
.row {
	flex-grow: 1;
}

div.snapshotMap         { height: 300px;}

.hero {
    /*background: url(img/explain/map_example.png) no-repeat center;*/
		background-color: white;
    background-size: cover;
    border: none;
}
	.hero .get-it {
		text-align: center;
	} /*margin-top: 30px;padding-right: 20px;}*/
.icon-feature          { text-align: center;}
.icon-feature .glyphicon { font-size: 60px; }
section.features        { background-color: #369;padding: 40px 0;color: #fff;}
.features h2            { color: #fff;}
.features .icon-features { margin-top: 15px;}
div.splashText {
    font-family: sans-serif;
    color: rgb(0,0,0);
    background-color: rgba(211,211,211,0.65);
    padding: 10px;
    text-align: center;
    border-radius:30px;
}

tr:nth-child(odd)		{ background-color:#eee; }
tr:nth-child(even)		{ background-color:#fff; }
div.top-buffer          { margin-top:20px; }
div.closeIcon           { float:right;}
div.helpArea {
position:absolute;
	right: 10px;
	padding: 10px;
	width: 230px;
	z-index: 1000;
}
div.favArea             { float:right;padding:10px;width:300px;}
div.findForm            { float:right;padding:10px;width:200px;}
div.searchForm          { float:right;padding:10px;background-color:rgba(255, 255, 255, 1.0);}
.form-group             { width:99%;}
div.waitingForData      { float:left;padding:10px;width:200px;}
div.hidden              { display:none}
td.middle               { text-align:center;}
span.txtSm              { font-size:8pt;}
span.txtBold            { font-weight:bold;}
p.left                  { text-align:left;}
div.chart               { margin-top:10px;margin-bottom:5px;}
div.tableType           { margin-top:10px;margin-bottom:5px;}
div.linkUrl             { font-size:smaller;}
.more                   { max-height: 40px;}

body.loading            { overflow: hidden;} /* When the body has the loading class, we turn the scrollbar off with overflow:hidden */
body.loading .modal     { display: block;}   /* Anytime the body has the loading class, our modal element will be visible */

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('../img/loading.gif') 
                50% 50% 
                no-repeat;
}




/* Desktop layout (> 768px) */
@media (min-width: 769px) {
	div.fullscreenMap {
		height: calc(100vh - 70px - 20px);
	}
}

/* Mobile layout (≤ 768px) */
@media (max-width: 768px) {
	.fullscreenMap {
		height: calc(100vh - 70px - 20px - 80px);
	}
	/* Handle info area toggle button */
	.info-toggle {
		display: block;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		background: white;
		padding: 5px 15px;
		border-radius: 5px 5px 0 0;
		box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
		z-index: 1001;
	}
}



#static-content, #map-container, #summary-container, #notes-container {
	display: none;
}
	#static-content.visible, #map-container.visible {
	display: block
	}
	#summary-container.visible, #notes-container.visible {
		display: block;
	}

.note {
}

.custom-marker {
	/* Additional styles for marker appearance */
	display: flex;
	align-items: center;
	justify-content: center;
}

div.name-value-pairs {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px; /* Space between name and value */
	align-items: center; /* Align items vertically */
}

div.name-value-pairs .name {
		font-weight: bold;
	}

div.name-value-pairs .value {
		text-align: left; /* Ensures values align vertically */
	}
div.elevation {
/*	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
*/	height: 150px;
	background: rgba(255,255,255,0.8);
	z-index: 1000;
	display: none;
}

div.calendar {
	display: block;
}


.hello-week .navigation .prev {
}

.hello-week .navigation .period {
}

.hello-week .navigation .next {
}

.hello-week .week {
}

.hello-week .month .day.is-weekend {
}

.hello-week .month .day.is-highlight {
	font-weight: bold;
	background-color: #e6f0fa;
}

.hello-week .month .day.is-today {
	border: 1px solid red;
}

.hello-week .month .day.is-selected {
	background-color: #e6e6e6;
	border: 1px solid black;
}

.hello-week .month .day.is-range {
}

.hello-week .month .day.is-start-range {
}

.hello-week .month .day.is-end-range {
}

.hello-week .month .day.is-disabled {
}