:root {
	--error-color: #dc3545;
	--warning-color: #ffc107;
	--notice-color: white;
}

body {
	color:white;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	background-color: black;
	margin: auto;
	overflow-y: scroll;
}
#live_container, #starmap {
	text-align: center;
}
img.current {
	width: 100%;
}

#starmap_container {
	position: absolute;
	/* ALLSKY CHANGED: was "overflow: hidden" - VirtualSky's own canvas and
	   UI controls (e.g. the "?" help button) can render slightly outside
	   this container's own box (confirmed: canvas top edge sits ~19px
	   above the container's top edge). With overflow:hidden that clipped
	   the help button's hit area whenever its computed position landed in
	   that overhang - e.g. reproducibly after enabling both the
	   constellation AND Messier toggles. Not needed for the dome shape
	   anymore anyway, since #starmap_inner (the canvas) now has its own
	   clip-path doing that job - anything outside the circle there is
	   already fully transparent, so letting the box overflow is safe. */
	overflow: visible;
}

#starmap_inner {
	/* ALLSKY ADDED: near-horizon constellations/Messier labels were spilling
	   into the black corners (mainly below the dome). The visible dome is a
	   true CIRCLE, cropped by the sensor at the top - NOT an ellipse inscribed
	   in the frame (an inscribed ellipse is taller than the real dome, which
	   is why an earlier attempt still leaked at the bottom). Geometry taken
	   from the privacy mask (Begrenzungsmaske3.png, same white=visible-sky
	   boundary already used for the physical mask), measured via OpenCV:
	   radius = 40.67% of width, center = 50% / 38.7% of the image. Converted
	   to CSS circle()'s percentage (which is relative to the box's diagonal,
	   not directly to width) for the container's fixed 4:3 aspect ratio.

	   Applied to the CANVAS itself (#starmap_inner), not the outer
	   #starmap_container - VirtualSky's own "?" help button is a sibling of
	   the canvas inside #starmap, not a child of it. Clipping the container
	   also clipped that button's hit area, making it unclickable. Clipping
	   just the canvas leaves the button (and any other VirtualSky UI
	   controls added the same way) untouched. */
	clip-path: circle(46.03% at 50% 38.7%);
	-webkit-clip-path: circle(46.03% at 50% 38.7%);
}

/* ALLSKY ADDED: VirtualSky's own "?" help button (.starmap_btn_help) gets a
   different inline top/right position on the very first build than on any
   later rebuild (top:22px;right:-54px vs. the "settled" top:4px;right:4px) -
   visually a small jump to the final corner position the first time a
   second toggle (e.g. Messier) triggers a rebuild. Pinning it here with
   !important (needed to beat the inline style) keeps it stable from the
   first render instead of chasing why VirtualSky's own first-build
   calculation differs. */
.starmap_btn_help {
	top: 4px !important;
	right: 4px !important;
}

.header {
	display: flex;
	align-items: center;
	width: 100%;
}

.header .clear {
	display: none;
}

.forecast.float-end {
	margin-left: auto;
}

.title {
	float: left;
	color: #DDD;
	font-size: 20px;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 400;
	padding-left: 90px;
	padding-top: 12px;
	background: url('../allsky-logo.png') left center;
	background-size: 75px;
	background-repeat: no-repeat;
	height: 55px;
}

.personalLink {
	text-align: center;
	font-size: 150%;
}

.info {
	font-size: 90%;
	padding: 8px;
	position: fixed;
	top: 150px;
	right: 0px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	background-color: #333;
	border: 2px solid #888;
	border-right: none;
	z-index: 1;
}

.info ul {
	list-style: none;
	padding-left: 2px;
	margin-bottom: 0;
}

.info ul li i {
	margin-right: 3px;
}

#leftSidebar {
	position: fixed;
	left: 0;
	top: 150px;
	padding: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #333;
	border: 2px solid #888;
	border-left: none;
	z-index: 2;
}

#leftSidebar li {
	list-style: none;
	padding: 2px 0
}

#leftSidebar li i {
	cursor: pointer;
	color: #888;
	margin: 2px 0;
}

#leftSidebar li i:hover,
#leftSidebar li i.active {
	color: orange;
}

/* ALLSKY ADDED: stylized galaxy icon for the Messier-objects button.
   No suitable galaxy glyph exists in the bundled Font Awesome set, so this
   uses a small custom SVG as a mask - background-color follows the same
   color/:hover/.active rules as the font-icon buttons above. */
.allsky-galaxy {
	display: inline-block;
	width: 1.25em;	/* matches fa-fw's fixed width, so it centers like the other sidebar icons */
	height: 1em;
	background-color: currentColor;
	-webkit-mask-image: url('../icon-galaxy.svg');
	mask-image: url('../icon-galaxy.svg');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

#imageContainer {
	margin: auto;
}
.imageContainer {
	border: 1px solid #5a5a5a;
}

.starmap_credit {
	display: none !important;
}

.diy {
	position: fixed;
	bottom: 10px;
	right: 10px;
	opacity: 0.5;
}

.diy:hover {
	opacity: 1;
}

.diy a {
	color: white;
}

.diy i {
	margin-right: 5px;
}

.noImages {
	text-align: center;
	font-size: 200%;
	color: #ffc107;
	border: 2px solid gray;
	margin: 4px;
}

.imagesHeader {	/* the whole table */
	width: 100%;
	padding: 5px 5px 20px 20px;
}
.imagesHeader .headerButton {
	text-align: left;
	width: 5%;	/* want headerTitle to be as wide as possible */
}
.imagesHeader .headerTitle {
	text-align: center;
	font-weight: bold;
	font-size: 150%;
}

.imagesSortOrder {
	text-align: center;
	padding-top: 10px;
}

.back-button {
	text-decoration: none;
	margin: 5px;
	padding: 5px 10px;
	color: white;
	background-color: #5D5D5D;
	border-radius: 5px;
	white-space: nowrap;
}

.back-button i {
	margin-right: 5px;
}

.archived-files {
}

.archived-files .day-container{
	/* width: 10%; */
	min-width: 100px;	/* same as thumbnail width */
	float: left;
	padding: 8px;
	text-align: center;	/* so text is centered below thumbnail */
}

.archived-files .img-text {
	border: 1px solid #333;
}

.archived-files .day-container .day-text {
	padding-top: 2px;
	color: #7777ff;
}

.archived-files .day-container .image-container {
	height: 100px;	/* based on 100px wide thumbnail */
}

.archived-files .day-container .image-container img{
	max-width: 100%;
	max-height: 100%;
}

.archived-files-end {
	clear: both;
}

.archived-files hr {
	margin-top: 25px;
	width: 50%;
	height: 2px;
	background-color: #7777ffaa;
	border-radius: 2px;
	border: 1px solid #7777ffaa;
}

.forecast {
	font-size: 0.75em;
	padding: 9px;
}

.forecast-day {
	font-weight: bold;
	margin: 0 3px;
}

.forecast .Very_Quiet,
.forecast .Quiet {
	color: green;
}

.forecast .Unsettled,
.forecast .Active {
	color: #ffc107;
}

.forecast .Minor_Storm,
.forecast .Moderate_Storm {
	color: darkorange;
}

.forecast .Strong_Storm,
.forecast .Severe_Storm,
.forecast .Extreme_Storm {
	color: #dc3545;
}

.forecast .WARNING {	/* for Aurora activity */
	color: #ffc107;
	font-weight: bold;
	font-size: 125%;
}

.forecast-map {
	width: 75%;
	max-width: 800px;
	margin-top: 30px;
}

.virtualsky_help {
	color: black;
}

.thumbnailError {
	color: #dc3545;
}

/* Messages on the home page */
.msg {
	background-color: #222;
	text-align: center;
	font-size: 145%;
	font-weight: bold;
	margin: 10px 0 20px 0;
	padding: 20px 0 20px 0;
	border-radius: 10px;
}
.error-msg {
	font-size: 150%;
	margin: 10px;
	padding: 10px;
	color: var(--error-color);
	border: 3px dashed var(--error-color);
}
.warning-msg {
	font-size: 125%;
	margin: 10px;
	padding: 10px;
	color: var(--warning-color);
	border: 3px dashed var(--warning-color);
}
.notice-msg {
	font-size: 110%;
	margin: 10px;
	padding: 10px;
	color: var(--notice-color);
	border: 3px solid var(--notice-color);
}

@media screen and (max-width: 480px) {
	.msg {
		font-size: 100%;
	}
}

@font-face {
  font-family: 'allsky';
  src:  url('../fonts/allsky.eot?thds7v');
  src:  url('../fonts/allsky.eot?thds7v#iefix') format('embedded-opentype'),
    url('../fonts/allsky.ttf?thds7v') format('truetype'),
    url('../fonts/allsky.woff?thds7v') format('woff'),
    url('../fonts/allsky.svg?thds7v#allsky') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="allsky-"], [class*=" allsky-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'allsky' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.allsky-constellation:before {
  content: "\e900";
}

@font-face {
  font-family: 'mini-timelapse';
  src:  url('../fonts/mini-timelapse.eot?dynh3c');
  src:  url('../fonts/mini-timelapse.eot?dynh3c#iefix') format('embedded-opentype'),
    url('../fonts/mini-timelapse.ttf?dynh3c') format('truetype'),
    url('../fonts/mini-timelapse.woff?dynh3c') format('woff'),
    url('../fonts/mini-timelapse.svg?dynh3c#mini-timelapse') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'mini-timelapse' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-mini-timelapse:before {
  content: "\ea15";
}