/*
 * Globals
 */

 :root {
  --background-color: #333;
  --text-color: #eee;
  --primary-color: #37c3e6;
}

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #fff;
  border: .05rem solid #fff;
}

/* My Stuff */
.oxbblue {
	color: var(--primary-color);
}



#wgstatus {
  white-space: pre-wrap;
}

#pingstatus {
  white-space: pre-wrap;
  overflow: auto;
  border: 1px solid var(--primary-color);
  padding: 0.5rem;          /* Adds padding around the content */
  margin: 0.5rem 0;        /* Adds some space above and below the box */
}

#messagebox {
  white-space: pre-wrap;
  overflow: auto;
  max-height: 20rem;
  border: 1px solid var(--primary-color);
  padding: 0.5rem;          /* Adds padding around the content */
  margin: 0.5rem 0;        /* Adds some space above and below the box */
  border-radius: 4px;       /* Makes the corners slightly rounded (optional) */
}

/*
 * Base structure
 */

html {
  font-size: 16px;
}

html,
body {
  height: 100%;
  background-color: var(--background-color);
}

body {
  display: -ms-flexbox;
  display: flex;
  color: #fff;
}

.cover-container {
  max-width: 42em;
}


/*
 * Header
 */
.masthead {
  margin-bottom: 2rem;
}

.masthead-brand {
  margin-bottom: 0;
}

.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  background-color: transparent;
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

@media (min-width: 48em) {
  .masthead-brand {
    float: left;
  }
  .nav-masthead {
    float: right;
  }
}


/*
 * Cover
 */
.cover {
  padding: 0 1.5rem;
}
.cover .btn-lg {
  padding: .75rem 1.25rem;
  font-weight: 700;
}


/*
 * Footer
 */
.mastfoot {
  color: rgba(255, 255, 255, .5);
}



/* Message
 */

.formatted-data {
  font-family: monospace;
  border: 1px solid var(--primary-color);
  padding: 10px;
  margin-bottom: 10px;
}

.data-item {
  display: flex;
  align-items: center; /* Vertically center the content */
  margin-bottom: 5px;
}

.key {
  font-weight: bold;
  color: rgba(255, 255, 255, .5);
  margin-right: 0.5em;
}

.colon {
  color: rgba(255, 255, 255, .5);
  margin: 0 0.5em; /* Add some space around the colon */
}

.value {
  text-align: right; /* Align the value to the right */
  margin-left: auto; /* Push the value to the right */
}

.nested-data {
  margin-left: 1em; /* Indent nested data */
}

/* LEDs

<div class="led"></div>
<div class="led led-red"></div>
<div class="led led-green"></div>
<div class="led off"></div>
<div class="led on"></div>
<div class="led blink"></div>

*/

.status-indicator {
  display: flex;          /* Use flexbox for easy alignment */
  align-items: center;   /* Vertically center the text and LED */
  font-size: 0.7rem;     /* Make the text smaller (adjust as needed) */
  justify-content: center; /* Add this line */
}

.status-indicator .led {
  margin-left: 0.4rem;
  margin-right: 0.4rem; /* Add some space between the LED and the text */
}

.led {
  margin: 20px auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: #000 0 -1px 6px 1px;
}
.led.on {
  background-color: var(--primary-color);
  box-shadow: #000 0 -1px 6px 1px;
}
.led.off {
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: #000 0 -1px 6px 1px;
}
.led.blink {
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 100% {
    background-color: var(--primary-color);
  }
  50% {
    background-color: rgba(255, 255, 255, 0.25);
  }
}

.led {
  margin: 20px auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: #000 0 -1px 6px 1px;
}
.led.on {
  background-color: var(--primary-color);
  box-shadow: #000 0 -1px 6px 1px;
}
.led.off {
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: #000 0 -1px 6px 1px;
}
.led.blink {
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 100% {
    background-color: var(--primary-color);
  }
  50% {
    background-color: rgba(255, 255, 255, 0.25);
  }
}
.led-red {
  background-color: #F00;
  box-shadow: #000 0 -1px 6px 1px, inset #600 0 -1px 8px, #F00 0 3px 11px;
}
.led-yellow {
  background-color: #FF0;
  box-shadow: #000 0 -1px 6px 1px, inset #660 0 -1px 8px, #FF0 0 3px 11px;
}
.led-orange {
  background-color: #FF8000;
  box-shadow: #000 0 -1px 6px 1px, inset #660 0 -1px 8px, #FF8000 0 3px 11px;
}
.led-green {
  background-color: #80FF00;
  box-shadow: #000 0 -1px 6px 1px, inset #460 0 -1px 8px, #80FF00 0 3px 11px;
}