@font-face {
	font-family: 'AlarmClock';
	src: url('/pgc/fonts/alarm_clock.ttf') format('truetype');
}
/* Ensure the body and HTML elements take up the full viewport and prevent overflow */
html, body {
	color:#999;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	align-items: center;
	justify-content: center;
	background-color: #3e3b3b;
	font-family: lato, sans-serif;
}

/* Header */
#header {
        border:1px solid #444;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
	background: #121212;
	color: #fff;
	display:table;
	font-size: 3vh;
	overflow: hidden;
	padding:1vh;
	position:fixed;
	text-overflow: ellipsis;
	top:0;
	white-space: nowrap;
	width: 100%;
	z-index:500;
}
#header img {
	width:1em;
	display:inline-block;
	vertical-align:middle;
}
#header-spacer {
	height:5.5vh;
}

/* Bottom menu */
#bottom-menu {
	display:table-row;
}
#bottom-menu-wrapper {
	border:1px solid #444;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
	background: #121212;
	display:table;
	font-size:5vh;
	position: fixed;
	padding:1vh;
	bottom: 0;
	width: 100%;
	z-index:9999;
}
.bottom-menu-item {
	width:25%;
	text-align:center;
	display:table-cell;
}
.bottom-menu-item a {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	text-decoration: none;
}
#footer-spacer {
	height:8vh;
}

/* camera view */
#camera-view {
	height:100%;
	object-fit: cover;
	width:100%;
}
#camera-wrapper {
	width:100%;
	height:100%;
	position:relative;
}
#countdown {
	display:none;
	position: absolute;
	top: 10vh; /* Adjust as needed */
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 1vw;
	border-radius: 5px;
	font-size: 6vw;
	font-family:'AlarmClock';
	opacity:0.75;
	z-index: 10;
	pointer-events: none;
	text-align:center;
	width:80%;
}
#launch-go {
	font-weight:bold;
}
#launch-select {
	background-color:#121212;
	color:inherit;
	font-family:inherit;
	font-size:2vh;
	margin-top:6vh;
	width:100%;
	z-index:500;
	position:fixed;
}
#launchpad-compass {
	left:50%;
	position:absolute;
	top:50%;
	transform: translate(-50%, -50%);
}
#user-stats {
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 5px;
	bottom:10vh;
	color: #fff;
	display: none;
	left:5vw;
        opacity:0.75;
        padding: 3vw;
	position:absolute;
}
#user-distance-direction {
	display: inline-block;
	animation: spin 2s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#sound-cue {
	color: green;
	display:none;
	font-size:30vw;
        left:50%;
        position:absolute;
        top:50%;
        transform: translate(-50%, -50%);
	animation: pulse 0.5s infinite alternate;
}
@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1); /* Start at original size */
  }
  100% {
    transform: translate(-50%, -50%) scale(1.1); /* Grow slightly */
  }
}

/* Launch view */
#launch-countdown {
	font-family:'AlarmClock';
	font-size:7vw;
	text-align:center;
}
.launch-image {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width:25%;
	vertical-align:middle;
}
#user-map {
	height:20vh;
}
#launch-window,#launch-window table {
width:100%;
}
.launch-window-line-container {
width: 100%;
padding: 20px 0;
box-sizing: border-box;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.launch-window-line {
width: 95%;
height: 2px;
background-color: #333;
position: relative;
}
.launch-window-line::before, .launch-window-line::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #007bff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.launch-window-line::before {
left: 0;
transform: translate(-50%, -50%);
}
.launch-window-line::after {
right: 0;
transform: translate(50%, -50%);
}
.launch-window-line-rocket {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.launch-window-open {
text-align:left;
}
.launch-window-close {
text-align:right;
}
.launch-header-container {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
-ms-overflow-style: none;
scrollbar-width: none;
}
.scroll-container::-webkit-scrollbar {
display: none;
}
.launch-header-item {
display: inline-block;
background-color: #02043b;
margin-right:1vw;
text-align: center;
border: 1px solid #333;;
border-radius:1vw;
padding:1vw;
}

/* Generic classes */
.block-item {
	background-color: #121212;
	border: 1px solid #444;
	border-radius: 2vw;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size:4vw;
	margin:1vh;
	padding:1vw;
	width:calc(100% - 2vw - 2vh - 1px);
}
.block-item-table {
	border-spacing: 3vw;
	display:table;
}
.block-item-tr {
	display: table-row;
}
.block-item-td {
	display: table-cell;
}
.center {
	text-align:center;
}
.right {
	text-align:right;
}
.vertical {
	vertical-align:center;
}
.countdown-table {
	color:inherit;
	font-family:inherit;
	font-size:inherit;
	text-align:center;
	width:100%;
}
.countdown-table-footers {
	font-size:3vw;
}
.info {
	background-color:#02043b !important;
	font-weight:bold;
}
.blue-link {
	color: #4f70a8;
}
.white-link {
	color: #ddd;
}
/* radio slider buttons */
.radio-slider {
    flex-grow: 1;
}
.radio-slider input[type=radio] {
    display: none;
}
.radio-slider input[type=radio]:checked + label {
    background-color:#121299;
}
.radio-slider label {
    display: block;
    padding: 6px 8px;
    font-weight: bold;
    text-align: center;
    transition : all .4s 0s ease;
}
.radio-slider-wrapper {
    background: #333;
    border-radius:2vw;
    display: flex;
    overflow: hidden;
}