/************************************************************************************
 Military Hacker Theme for ProScan Web Server
 File must be named: style1.css (same folder as executable)
************************************************************************************/

html, body { height:100%; }

:root{
  --bg0:#05090a;
  --bg1:#07110c;
  --panel: rgba(10, 18, 14, 0.80);
  --panel2: rgba(10, 18, 14, 0.55);
  --line: rgba(0,255,153,0.32);
  --line2: rgba(0,255,153,0.18);
  --txt: rgba(220,255,245,0.90);
  --muted: rgba(190,255,230,0.70);
  --accent: rgba(0,255,153,0.95);
  --warn: rgba(255,176,0,0.95);
}

/* Page background + subtle “terminal” gradient */
html.np-hacker, html.np-hacker body{
  background:
    radial-gradient(1200px 800px at 30% 10%, rgba(0,255,153,0.07), transparent 55%),
    radial-gradient(900px 700px at 70% 30%, rgba(0,160,255,0.05), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--txt);
}

/* Scanlines overlay */
html.np-hacker body:before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    rgba(0,0,0,0.00) 3px,
    rgba(0,0,0,0.00) 6px
  );
  opacity: 0.22;
  mix-blend-mode: overlay;
}

/* Subtle “CRT glow” vignette */
html.np-hacker body:after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background: radial-gradient(1200px 900px at 50% 40%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* Base body wrapper */
#body {
  margin:0 auto;
  text-align:center;
  background: transparent;
}

#innerbody {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 100%;
  margin: 0 auto;
  text-align:center;
  padding: 10px;
  width: 800px;
  position:relative;
  background: transparent;
}

/* Title area if ProScan uses #div1 */
#div1{
  font-size: 120%;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0,255,153,0.25);
}

/* Panels */
#div_login,
#div_listen_Live{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow:
    0 0 18px rgba(0,255,153,0.10),
    inset 0 0 0 1px rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
}

#div_login{
  text-align:left;
  float:right;
  position:relative;
  top:10px;
  height:55px;
  padding: 8px;
}

#div_listen_Live{
  width:340px;
  padding: 10px;
}

/* Live section subtext */
#div_listen_Live_3,
#span1,#span2,#span3,#span4,#span5,
#span9,#span10,#span11,
#metadata_span{
  color: var(--muted);
}

/* Links */
a:link, a:visited{
  color: rgba(110,255,210,0.95);
  text-decoration: none;
  border-bottom: 1px dashed rgba(0,255,153,0.25);
}
a:hover{
  color: var(--accent);
  border-bottom-color: rgba(0,255,153,0.70);
  text-shadow: 0 0 10px rgba(0,255,153,0.18);
}

/* Tables -> make them look like intel panels */
#table1, #table2{
  width:100%;
  text-indent:5px;
  text-align:left;
  background: var(--panel2);
  border-radius: 14px;
  border: 1px solid var(--line2);
  box-shadow:
    0 0 22px rgba(0,255,153,0.10),
    0 8px 18px rgba(0,0,0,0.35);
}

/* Table headings */
#tr1-1{
  text-align:center;
  font-weight:bold;
  color: var(--accent);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Horizontal rules */
hr{
  background-color: rgba(0,255,153,0.25);
  height: 1px;
  border: 0;
  width: 99%;
}

/* Inputs / selects */
input, select, textarea{
  background: rgba(0,0,0,0.35);
  color: var(--txt);
  border: 1px solid rgba(0,255,153,0.25);
  border-radius: 10px;
  padding: 6px 8px;
  outline: none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(0,255,153,0.55);
  box-shadow: 0 0 0 3px rgba(0,255,153,0.10);
}

/* Audio player */
#audio_player{
  height: 32px;
  filter: contrast(1.05) saturate(1.1);
}

/* Buttons wrapper + buttons */
#buttons_wrapper{ position:relative; top:5px; }
.buttons{
  height:21px;
  float:left;
  padding: 2px 2px 4px 2px;
  position:relative;
}
.button_span{
  font-size:80%;
  padding-right:4px;
  padding-left:4px;
  color: var(--txt);
}

/* Up/down buttons: keep the triangles, but glow them */
.down_button, .up_button{
  position:relative;
  margin:0;
  padding:0;
  height:22px;
  width:50px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(0,255,153,0.18);
  border-radius: 10px;
}
.down_button:before{
  content:'';
  position:absolute;
  width:0;
  height:0;
  border-left:10px solid transparent;
  border-top:10px solid var(--warn);
  border-right:10px solid transparent;
  left:14px;
  top:4px;
  filter: drop-shadow(0 0 6px rgba(255,176,0,0.25));
}
.up_button:before{
  content:'';
  position:absolute;
  width:0;
  height:0;
  border-left:10px solid transparent;
  border-bottom:10px solid var(--accent);
  border-right:10px solid transparent;
  left:14px;
  top:4px;
  filter: drop-shadow(0 0 8px rgba(0,255,153,0.20));
}

/* Mute styling */
#button_mute{ color: var(--txt); }
#button_mute.active{ color: rgba(255,90,90,0.95); }
#button_mute.disabled{ pointer-events:none; opacity:0.5; }

/* Option boxes */
#div_option1, #div_poll_push, #admin_box{
  font-size:80%;
  border-radius: 10px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(0,255,153,0.20);
  color: var(--muted);
}

/* “Hide” span12 but keep as-is */
#span12{ font-size:80%; color:transparent; }

/************************************************************************************
 Parameters page (keep same structure but theme it)
************************************************************************************/
#param_body{
  background: transparent;
  margin:0 auto;
  text-align:center;
}

#param_innerbody{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:100%;
  background: var(--panel);
  margin:50px auto;
  padding:12px;
  width:800px;
  text-align:left;
  border-radius:14px;
  border: 1px solid rgba(0,255,153,0.25);
  box-shadow:
    0 0 22px rgba(0,255,153,0.10),
    0 10px 22px rgba(0,0,0,0.40);
}

/* Tooltips: keep behavior, just theme */
.tooltip, .tooltip1{
  background-color: rgba(0,255,153,0.20);
  border: 1px solid rgba(0,255,153,0.25);
}
.tooltip:before, .tooltip1:before{
  color: rgba(0,255,153,0.95);
}
.tooltip p, .tooltip1 p{
  background-color: rgba(0,0,0,0.72);
  color: var(--txt);
  border:1px solid rgba(0,255,153,0.25);
}
/* ==== DARKEN EVERYTHING (override) ==== */

/* Darker global background + less glow */
html.np-hacker, html.np-hacker body{
  background:
    radial-gradient(900px 700px at 30% 10%, rgba(0,255,153,0.03), transparent 60%),
    radial-gradient(800px 600px at 70% 30%, rgba(0,160,255,0.02), transparent 65%),
    linear-gradient(180deg, #020405, #030708);
}

/* Reduce scanline brightness */
html.np-hacker body:before{
  opacity: 0.12;
}

/* Stronger vignette to keep edges dark */
html.np-hacker body:after{
  background: radial-gradient(1200px 900px at 50% 40%, transparent 45%, rgba(0,0,0,0.72) 100%);
}

/* Darker panels */
#div_login,
#div_listen_Live,
#table1,
#table2,
#param_innerbody,
#np_hud{
  background: rgba(0,0,0,0.60) !important;
  border-color: rgba(0,255,153,0.22) !important;
  box-shadow:
    0 0 14px rgba(0,255,153,0.08),
    0 10px 22px rgba(0,0,0,0.55) !important;
}

/* Slightly dim text so it feels “terminal” not neon */
#innerbody, #param_innerbody{
  color: rgba(210,255,240,0.82);
}
#div1{
  color: rgba(0,255,153,0.80);
  text-shadow: 0 0 8px rgba(0,255,153,0.18);
}

/* Inputs darker */
input, select, textarea{
  background: rgba(0,0,0,0.55) !important;
  border-color: rgba(0,255,153,0.22) !important;
}
/* ==== CLEAN TITLE: BLACK TEXT + GREEN GLOW (NO OVERLAY) ==== */

#div1{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 0 !important;
  margin: 8px auto 14px auto;

  /* Text styling */
  color: #000000 !important;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;

  /* Green glow for readability */
  text-shadow:
    0 0 6px rgba(0,255,153,0.55),
    0 0 12px rgba(0,255,153,0.35),
    0 0 22px rgba(0,255,153,0.18);
}

/* REMOVE any decorative :after elements (flag, etc.) */
#div1:after{
  content: none !important;
}


#body {
    background:#ECECEC;
    margin:0 auto;
    text-align:center;
}


#div_listen_Live_1 {
    float:left;
}


#div_listen_Live_3 {
    font-size:80%;
}


#div_player_1 {
    text-align:left;
}


#div_player_2 {
    text-align:center;
    position:relative;
}


#div_button_mute {
    margin-left: 70%;
}


#audio_player {
    height: 32px;
}


#span1 {
    font-size:80%;
}


#span2 {
    font-size:80%;
}


#span3 {
    font-size:80%;
}


#span4 {
    font-size:80%;
    color:blue;
}


#span5 {
    font-size:80%;
}


#span9 {
    font-size:90%;
    position:relative;
    left:18px;
}


#span10 {
    font-size:90%;
    position:relative;
    left:18px;
}


#span11 {
    font-size:80%;
    position:relative;
    left:34px;
}


#table1 {
    width:100%;
    text-indent:5px;
    text-align:left;
    background-color:#dadada;
    border-radius:10px;
    box-shadow:0px 3px 7px #333;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-box-shadow:0px 3px 7px #333;
}


#tr1-1 {
    text-align:center;
    font-weight:bold
}


#tr1-2 {
    font-weight:bold;
}


#tr1-3 {
    font-weight:bold;
}


#td1-2 {
    text-align:center;
}


#td1-3 {
    width:160px;
}


#td1-4 {
    width:160px;
}


#td1-6 {
    text-align:left;
    width:95px;
}


#table2 {
    width:100%;
    text-indent:5px;
    text-align:left;
    background-color:#dadada;
    border-radius:10px;
    box-shadow:0px 3px 7px #333;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-box-shadow:0px 3px 7px #333;
}


#td2-1 {
    width:160px;
    font-weight:bold;
}


hr {
    background-color:gray;
    height:1px;
    border:0px;
    width:99%;
}


#input1 {
    width:80px;
}


#span12 {
    font-size:80%;
    color:transparent;
}


#buttons_wrapper {
    position:relative;
    top:5px;
}


#button_1 {
    top:3px;
}


#button_4 {
    top:3px;
}


#button_7 {
    top:3px;
}


.down_button {
    position:relative;
    margin:0px;
    padding:0px;
    height:22px;
    width:50px;
}


.up_button {
    position:relative;
    margin:0px;
    padding:0px;
    height:22px;
    width:50px;
}


#div_option1 {
    font-size:80%;
    position: absolute;
    padding-top:4px;
    padding-bottom:3px;
    padding-right:4px;
    padding-left:4px;
    border:1px solid silver;
    border-radius:6px;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
}


#cb1 {
    width:100px;
    background:transparent;
}


#option2 {
    font-size:80%;
}


#cb2 {
    width:100px;
    background:transparent;
}


#div_poll_push {
    font-size:80%;
    position: absolute;
    right:10px;
    padding-top:4px;
    padding-bottom:5px;
    padding-right:4px;
    padding-left:4px;
    border:1px solid silver;
    border-radius:6px;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
}


#admin_box {
    font-size:80%;
    position: absolute;
    left:10px;
    padding-top:4px;
    padding-bottom:5px;
    padding-right:4px;
    padding-left:4px;
    border:1px solid transparent;
    border-radius:6px;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
}


.tooltip {
    position: absolute;
    top: -1000px;
    right: 0px;
    text-align: center;
    background-color: #99bfe6;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 14px;
    cursor: default;
}


.tooltip:before {
    position: relative;
    top: 1px;
	left: 0px;
    content:'?';
    font-weight: bold;
    color: #484848;
}


.tooltip:hover p {
    display:block;
}


.tooltip p {
    display: none;
    text-align: left;
    background-color: #e6ecff;
    padding: 4px;
    width: 500px;
    position: absolute;
    right: -4px;
    color: black;
    font-size: 12px;
    border:1px solid silver;
    border-radius:8px;
    -webkit-border-radius:8px;
    -khtml-border-radius:8px;
}


.tooltip p:before {
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color: black;
    right:8px;
    top:-12px;
}


.tooltip1 {
    position: absolute;
    top: -1000px;
    right: 0px;
    text-align: center;
    background-color: #99bfe6;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 14px;
    cursor: default;
}


.tooltip1:before {
    position: relative;
    top: 1px;
    left: 0px;
    content: '?';
    font-weight: bold;
    color: #484848;
}


.tooltip1:hover p {
    display: block;
}


.tooltip1 p {
    display: none;
    text-align: left;
    background-color: #e6ecff;
    padding: 4px;
    width: 350px;
    position: absolute;
    left: -120px;
    color: black;
    font-size: 12px;
    border: 1px solid silver;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
}


.tooltip1 p:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom-color: black;
    left: 120px;
    top: -12px;
}


#span13 {
    font-size:80%;
    color:blue;
}


#span14 {
    font-size:80%;
}


#pre1 {
    display: inline;
	position:relative;
    top:-2px;
    font-size:120%;
    font-weight:bold;
}


#button_mute {
    color:black;
}


#metadata_span {
    font-size: 80%;
}
/* ==== FLAGS LEFT/RIGHT + BLACK TEXT + GREEN GLOW (HARD OVERRIDE) ==== */

#div1{
  position: relative !important;
  display: inline-block !important;
  padding: 6px 52px 6px 52px !important;   /* room for both flags */
  margin: 8px auto 14px auto !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  color: #000000 !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;

  text-shadow:
    0 0 6px rgba(0,255,153,0.55),
    0 0 12px rgba(0,255,153,0.35),
    0 0 22px rgba(0,255,153,0.18) !important;
}

/* USA flag (LEFT) */
#div1::before{
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 30px !important;
  height: 18px !important;

  background-repeat: no-repeat !important;
  background-size: 30px 18px !important;
  background-position: center !important;

  border-radius: 3px !important;
  box-shadow: 0 0 6px rgba(0,255,153,0.35) !important;

  pointer-events: none !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='100' viewBox='0 0 190 100'%3E%3Crect width='190' height='100' fill='%23b22234'/%3E%3Cg fill='%23fff'%3E%3Crect y='7.69' width='190' height='7.69'/%3E%3Crect y='23.07' width='190' height='7.69'/%3E%3Crect y='38.46' width='190' height='7.69'/%3E%3Crect y='53.84' width='190' height='7.69'/%3E%3Crect y='69.23' width='190' height='7.69'/%3E%3Crect y='84.61' width='190' height='7.69'/%3E%3C/g%3E%3Crect width='76' height='53.84' fill='%23003f87'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Ccircle cx='24' cy='9' r='2'/%3E%3Ccircle cx='39' cy='9' r='2'/%3E%3Ccircle cx='54' cy='9' r='2'/%3E%3Ccircle cx='69' cy='9' r='2'/%3E%3Ccircle cx='16.5' cy='18' r='2'/%3E%3Ccircle cx='31.5' cy='18' r='2'/%3E%3Ccircle cx='46.5' cy='18' r='2'/%3E%3Ccircle cx='61.5' cy='18' r='2'/%3E%3Ccircle cx='9' cy='27' r='2'/%3E%3Ccircle cx='24' cy='27' r='2'/%3E%3Ccircle cx='39' cy='27' r='2'/%3E%3Ccircle cx='54' cy='27' r='2'/%3E%3Ccircle cx='69' cy='27' r='2'/%3E%3Ccircle cx='16.5' cy='36' r='2'/%3E%3Ccircle cx='31.5' cy='36' r='2'/%3E%3Ccircle cx='46.5' cy='36' r='2'/%3E%3Ccircle cx='61.5' cy='36' r='2'/%3E%3Ccircle cx='9' cy='45' r='2'/%3E%3Ccircle cx='24' cy='45' r='2'/%3E%3Ccircle cx='39' cy='45' r='2'/%3E%3Ccircle cx='54' cy='45' r='2'/%3E%3Ccircle cx='69' cy='45' r='2'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* Indiana flag (RIGHT) */
#div1::after{
  content: "" !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 30px !important;
  height: 18px !important;

  background-repeat: no-repeat !important;
  background-size: 30px 18px !important;
  background-position: center !important;

  border-radius: 3px !important;
  box-shadow: 0 0 6px rgba(0,255,153,0.35) !important;

  pointer-events: none !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23003f87'/%3E%3Cg fill='%23ffd700'%3E%3Ccircle cx='150' cy='100' r='26'/%3E%3Ccircle cx='150' cy='36' r='6'/%3E%3Ccircle cx='150' cy='164' r='6'/%3E%3Ccircle cx='86' cy='100' r='6'/%3E%3Ccircle cx='214' cy='100' r='6'/%3E%3Ccircle cx='104' cy='56' r='6'/%3E%3Ccircle cx='196' cy='56' r='6'/%3E%3Ccircle cx='104' cy='144' r='6'/%3E%3Ccircle cx='196' cy='144' r='6'/%3E%3Cpolygon points='150,8 154,20 166,20 156,28 160,40 150,32 140,40 144,28 134,20 146,20'/%3E%3C/g%3E%3C/svg%3E") !important;
}
/* ==== GLOBAL BACKGROUND: DARKER / NIGHT OPS ==== */

/* Overall page background */
html, body{
  background: #0b0e0d !important;   /* deep charcoal */
}

/* If ProScan is forcing a light wrapper */
#body{
  background: #0b0e0d !important;
}

/* Inner page area (keeps scanner untouched) */
#innerbody{
  background: transparent !important;
}

/* Optional: subtle vignette so center pops */
body:after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    1200px 900px at 50% 45%,
    rgba(0,0,0,0.0) 45%,
    rgba(0,0,0,0.65) 1