/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height + content to footer spacing */
  margin-bottom: 229px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 209px;
  background-color: #222;
}

#footer .row {
  padding: 1px 0;
}

#footer .row .flexbox {
  min-height: 30px;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.footer-selector {
  margin-bottom: 15px;
}

.footer-selector::before {
  clear: both;
}

@media screen and (min-width: 768px) {
  body {
    /* Margin bottom by footer height + content to footer spacing */
    margin-bottom: 144px;
  }
  #footer {
    /* Set the fixed height of the footer here */
    height: 124px;
  }
}

@media screen and (min-width: 900px) {
  body {
    margin-bottom: 100px;
  }
  #footer {
    height: 54px;
  }
  .footer-selector {
    margin-bottom: 0;
  }
  #footer .row .flexbox {
    margin-bottom: 0;
  }
}

.server-status-row {
  display: flex;
  justify-content: center;   /* center the row */
  gap: 25px;                 /* spacing between boxes */
  margin: 20px 0;            /* space above/below */
}

.status-box {
  background: #222;           /* dark box */
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.online-dot, .offline-dot {
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:50%;
}

.online-dot { background-color:green; }
.offline-dot { background-color:red; }

.login-top-right {
  position: absolute;
  top: 75px;
  right: 20px;
  width: 250px; /* adjust as needed */
}

/* Push content down so it doesn’t overlap under the bar */
body {
  padding-top: 50px; /* adjust to match bar height */
  background: #FFF;  /* rest of page stays black */
}