.dropdown {
  top: 58px;
  left: 67px;
  display: inline-block;
  position: absolute;
  overflow: hidden;
  height: 28px;
  width: 150px;
  background: #f2f2f2;
  border: 1px solid;
  border-color: white #f7f7f7 whitesmoke;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06));
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.dropdown:before, .dropdown:after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 10px;
  width: 0;
  height: 0;
  border: 4px dashed;
  border-color: #888888 transparent;
  pointer-events: none;
}

.dropdown:before {
  border-bottom-style: solid;
  border-top: none;
}

.dropdown:after {
  margin-top: 7px;
  border-top-style: solid;
  border-bottom: none;
}

.dropdown-select {
  position: relative;
  width: 130%;
  margin: 0;
  padding: 6px 8px 6px 10px;
  height: 28px;
  line-height: 14px;
  font-size: 12px;
  color: #62717a;
  text-shadow: 0 1px white;
  background: #f2f2f2; /* Fallback for IE 8 */
  background: rgba(0, 0, 0, 0) !important; /* "transparent" doesn't work with Opera */
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
}

.dropdown-select:focus {
  z-index: 3;
  width: 100%;
  color: #394349;
  outline: 2px solid #49aff2;
  outline: 2px solid -webkit-focus-ring-color;
  outline-offset: -2px;
}

.dropdown-select > option {
  margin: 3px;
  padding: 6px 8px;
  text-shadow: none;
  background: #f2f2f2;
  border-radius: 3px;
  cursor: pointer;
}

/* Fix for IE 8 putting the arrows behind the select element. */

.lt-ie9 .dropdown {
  z-index: 1;
}

.lt-ie9 .dropdown-select {
  z-index: -1;
}

.lt-ie9 .dropdown-select:focus {
  z-index: 3;
}

/* Dirty fix for Firefox adding padding where it shouldn't. */

@-moz-document url-prefix() {
  .dropdown-select {
    padding-left: 6px;
  }
}

/* Style the tab */
.topBar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  height: 56px;
  background: #f3f3f3; /* Light gray background */
  padding: 0 16px;
}

.wrapper {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

.logo {
  height: 36px;
  margin-right: 8px;
}

body {
margin: 0;
font-family: Arial, sans-serif;
}

#image-grid {
display: grid;
gap: 10px;
padding: 10px;
grid-template-columns: 1fr; /* Ensure each container spans the full width */
}

#image-grid img {
width: 100%;
height: auto;
cursor: zoom-in;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: none;
}

#image-grid canvas {
width: 100%;
height: auto;
transition: transform 0.3s ease;
}

.image-canvas-container {
position: relative;
display: inline-block;
margin-bottom: 16px;
}

.canvas-wrapper {
position: absolute;
bottom: 0;
left: 0;
width: 50%; /* Quarter of the image width */
height: 50%; /* Quarter of the image height */
opacity: 0.76; /* 50% transparency */
cursor: zoom-in;
background-color: #d8d6d6;
}

.image-canvas-container img {
display: block;
width: 100%;
height: auto;
transition: transform 0.3s ease;
}

#full-image-container,
#full-canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it is above other elements */
  cursor: zoom-out;
}


#image-grid img:hover {
transform: translateY(-4px); /* Slight lift effect */
}

#image-grid canvas:hover {
transform: translateY(-4px); /* Slight lift effect */
}

#image-grid img:hover,
#image-grid canvas:hover {
  transform: scale(0.97); /* Slight zoom out */
  box-shadow: 0 8px 24px rgba(0,0,0,0.18); /* Modern shadow effect */
}


#full-image-container.hidden,
#full-canvas-container.hidden {
  display: none;
}

#full-image-wrapper,
#full-canvas-wrapper {
  position: relative;
  display: inline-block;
}

#full-canvas-wrapper {
background-color: #f1f1f1;
}


#full-image,
#full-canvas {
  max-width: 90vw; /* Constrain the image to 90% of viewport width */
  max-height: 90vh; /* Constrain the image to 90% of viewport height */
  display: block;
  cursor: auto;
}

#refresh-button {
position: absolute;
bottom: 15px;
left: 15px;
padding: 12px 24px;
font-size: 14px;
cursor: pointer;
background: #ff0000; 
color: white;
border: none;
border-radius: 50px; 
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Professional font */
}

#refresh-button:hover {
background: #7c0101; /* Darker blue on hover */
transform: translateY(-2px); /* Slight lift effect */
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

#refresh-button:focus {
outline: none;
}

#spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 36px;
height: 36px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid #ff0000; /* Red color for the spinner */
border-radius: 50%;
animation: spin 1s linear infinite;
}

.spinner-small {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 24px;
height: 24px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top: 3px solid #ff0000; /* Red color for the spinner */
border-radius: 50%;
animation: spin 1s linear infinite;
display: none; /* Hide by default */
}

#full-image-wrapper {
position: relative;
display: inline-block;
}

#spinner.hidden {
display: none;
}

@keyframes spin {
0% {
    transform: translate(-50%, -50%) rotate(0deg);
}
100% {
    transform: translate(-50%, -50%) rotate(360deg);
}
}

.station-name-overlay {
  display: inline-block;
  text-decoration: none;       /* remove underline */
  color: #ffffff;              /* make text white */
  background: rgba(0,0,0,0.45);
  padding: 6px 10px;
  border-radius: 6px;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease;
  transform-origin: center;
  will-change: transform;
  cursor: pointer;
  pointer-events: auto;
}

.station-name-overlay:hover,
.station-name-overlay:focus {
  transform: scale(1.06);
  background: rgba(0,0,0,0.55);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  color: #ffffff;              /* ensure hover text remains white */
  text-decoration: none;
  outline: none;
}

.overlay-wrapper {
  position: absolute;
  top: 8px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

.topbar-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 36px; /* Match .logo height */
  line-height: 36px;
  padding: 0 18px;
  font-size: 1em;
  background: #ff0000;
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-btn:hover {
  background: #7c0101;
}

.project-info-block {
  max-width: 800px;
  margin: 40px auto;
  padding: 32px;
  background: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  font-size: 1.2em;
  color: #222;
  text-align: justify;
}

.hidden {
  display: none !important;
}

.status-label {
  margin-top: 10px; /* Remove margin-top, use margin-bottom above */
  padding: 2px 10px;
  border-radius: 8px;
  font-size: 0.9em;
  color: #fff;
  text-align: center;
  min-width: 100px;
  display: inline-block;
}

.status-label.no-live {
  background: rgba(136, 136, 136, 0.85); /* gray, 85% opacity */
}

.status-label.live {
  background: rgba(211, 47, 47, 0.85);   /* red, 85% opacity */
  font-weight: bold;
}

.image-item {
  text-align: center;
  margin-bottom: 16px;
}

.canvas-wrapper:empty {
  background: transparent !important;
  pointer-events: none;
}