.nodeNum {
    margin: 5px;
    cursor: pointer;
}

.nodeNum:hover {
	font-weight: bold;
}


.nodeTitle {
    display: inline;
    cursor: pointer;
}

.nodeTitle:hover {
	color:#632A8F;
}


#bubblechart {
	display: inline;
	font-size: 10px;
}

#statuslink {
	display: inline;
	font-size: 10px;
}

pre {
    display: inline;
    font-family: monospace;
    white-space: pre;
    margin: 0;
    line-height: 0.9;
    font-size:13px;
}

body {
	
	background: #bbbbbb;
}


#header {
    position:relative;
    max-width:900px;
    min-width:500px;
    background-color: #ffffff;
    height:85px;
    border: solid 1px #7E7E7E;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;

}

#headerTitle {
    position: absolute;
    top:10px;
    left:10px;
    margin: 0px 0px;
    color: #5C5A59;
    font-size: 2.5em;
    line-height: normal;
    letter-spacing: normal;
    font-family: 'Iowan Old Style',sans-serif;
}

#headerTitle a:link {
    text-decoration: none;
    color: #5C5A59;
}

#headerTitle a:visited {
    color: #5C5A59;
    text-decoration: none;
}

#headerTag {
    position:absolute;
    color: #5C5A59;
    top:60px;
    left:15px;
    margin: 0px 0px;
    font-weight: normal;
    font-size: 1.0em;
    line-height: normal;
    font-family: 'Iowan Old Style',sans-serif;
    letter-spacing: normal;
}

#headerImg {
    position:absolute;
    top:1px;
    right:1px;}

#headerLogin {
    height: 25px;
    width: 50px;
    float: right;
    position: relative;
    overflow: hidden;
    font-size:12px;
    font-family:Verdana,Arial,sans-serif;
    background-color: #632A8F;
    padding: 5px 12px 5px;
    text-decoration: none;
    border-bottom-right-radius: 10px; 
}

#headerLogin a:hover {
    background-color: #3062b2;
    color:white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;    
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#headerLogin a:link {
    text-decoration: none;
    color: white;    
}



#headerLogin a:visited {
    text-decoration: none;
    color: white;    
}

#menubar {
    
    max-width:900px;
    min-width:500px;
    background-color: #632A8F;
    height:25px;
    border: solid 1px #7E7E7E;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
}


#menu {
    height: 25px;
    float: left;
    overflow: hidden;
    background-color: #632A8F;
    font-size:12px;
    font-family:Verdana,Arial,sans-serif;
    border-bottom-left-radius: 10px;
   
}
#menu a {
    display: block;
    padding: 5px 12px 5px;
    text-decoration: none;
    color: #5C5A59;
}

#menu a:hover {
    background-color: #5792f2;
    color:white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;    
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#menu a:active {
}

#menu a.active {
    color:white;
}


#menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #632A8F;
    margin-left: 25px;
}

#menu li {
    float: left;
}

#menu li a, .dropbtn {
    display: inline-block;
     color: white; 
    text-align: center;
    /* padding: 14px 16px; */
    text-decoration: none;
}

#menu li.dropdown {
    display: inline-block;
}

#menu .dropdown-content {
    display: none;
    position: absolute;
    background-color: #632A8F;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 5;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;  
}

#menu .dropdown-content a {
    color: #ffff99;
    padding: 4px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

#menu .dropdown-content a:hover {
    background-color: #5792f2;
    color:white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;    
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;  
}


#menu .dropdown:hover .dropdown-content {
    display: block;
}

#test_area {
    min-height: 20px;   
    display: block;     
}



#footer {
    font-size:11px;
}

table.rtcm {
   border-collapse:collapse;
   border:1px solid black;
   font-family:verdana,arial,sans-serif;
}
table.rtcm tr {
	font-size:12px;
}

table.rtcm td {
	white-space:nowrap;
}

table.rtcm th {
    border:1px solid black;
	font-size:13px;
	background-color: #dedede;
}

table.gridtable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
 	max-width:900px;
	min-width:500px;
                
}

table.gridtable th {
	border-width: 1px;
	padding: 2px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}
table.gridtable td {
	border-width: 1px;
	padding: 2px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}

table.gridtable tr.rColor td {
      background-color: #632A8F; color: white;
}

table.gridtable tr.rxColor td {
      background-color: #28D700; color: black;
}

table.gridtable tr.rxkColor td {
      background-color: #288300; color: white;
}

table.gridtable tr.cColor td {
      background-color: #FF9900; color: white;
}


table.gridtabletitle {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
	border-style: solid;
	border-width: 1px;
 	max-width:900px;
	min-width:500px;
}

table.gridtabletitle tr {
	border-width: 0px;
	text-align: center;
	padding: 1px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}

table.gridtabletitle th {
	border-width: 1px;
	padding: 4px;
	background-color: #dedede;
}

table.gridtabletitle td {
	border-width: 1px
	padding: 1px;
	background-color: #dedede;
}

table.gridtabletitle tr.alarm td {
	background-color: #ff3333; 
	color: white;
}

table.gridtabletitle tr.warning td {
	background-color: orange;
}

table.gridtabletitle tr.rx td {
	background-color: LawnGreen;
}

table.gridtabletitle tr.radio-off td {
	background-color: red;
	color: white;
}


.disconnect {
    font-size: 14px;
    text-align: left;
}

.text {
  position: relative;
  margin: 0px 0px 0px 10px;
  width: 330px;
  font-size: 14px;
  text-align: left;
}
.barbox_a {
  position: absolute;
  top: 2px;
  left: 10px;
  margin: 0px 0px 0px 0px;
  width: 302px;
  height: 22px;
  background-color: black;
}
.bar {
  position: relative;
  top: 1px;
  left: 1px;
  margin: 0px 0px 0px 0px;
  width: 0px;
  height: 20px;
  background-color: #0099FF;
  text-align: center;
  color: white;
}

.per {
  position: absolute;
  top: 0px;
  font-size: 12px;
  left: 50%;
  height: 20px;
  margin: 0px 0px 0px 0px;
  background-color: #0099FF;
  color: white;
}

.blank {
  background-color: white;
  width: 300px;
}

#login {
    display: none;
}

#loginlink {
    position: absolute;
    top: 0px;
    right: 0px;
    display: block;
    background: #632A8F;
    padding: 5px 15px 5px 15px;
}

#logoutlink {
    position: absolute;
    top: 0px;
    right: 0px;
    display: block;
    background: #632A8F;
    padding: 5px 15px 5px 15px;
}


label {
    line-height: 1.8;
}

.clearer {
	clear: both;
}

.vspace {
	padding: 1px 1px 1px 1px;
}

.bspace {
	padding: 5px 5px 5px 5px;
}


#cpMain {
    display: none;
}

.top-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width:900px;


}

#connect_form {
    max-width: 600px;
    min-width: 560px;
    line-height: 1.5;

}

.stream-player {
    flex-shrink: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.stream-player iframe {
    border: 0;
    box-shadow: none;
    display: block; /* removes small baseline gap */
}

.supermon {
    margin-top: 15px;
}

.title-box {
    width: 500px;
    flex-shrink: 0;
    text-align: center;
}



#main {
   
    font-size:12px;
    font-family:Verdana,Arial,sans-serif;
    position: relative;
    max-width:900px;
    min-width:500px;

}

#maintitle {
   
    font-weight: normal;
    font-size: 1.8em;
    line-height: normal;
    font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
    color: #000000;
    letter-spacing: normal;
}

select {
    padding:1px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    
    background: #dedede;
    color: black;
}

input {
    padding:1px 5px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    
    background: #dedede;
    color: black;
}


#general {
    max-width:900px;
    min-width:500px;
}

#cpuload {
    font-size:11px;
}

#ipDetails {
    font-size:11px;
}

#gpiostatus {
    font-size:11px;
}

#blinky {
    font-size:11px;
}

#cpResult {
    font-size:12px;
}




/* Menu Section */


{
  box-sizing: border-box;
}


.column {
  float: left;
  width: 100px;
  padding: 10px;
  border-radius: 10px;
  background-color: #aaa;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


.top-bar {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #bbbbbb;
}


.links-row {
    display: flex;
    padding: 10px;
    gap: 10px;

}

.row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 5px;    
    overflow-x: auto; /* helps prevent squeeze issues */
}


.control-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.control-panel.open {
    max-height: 500px; 
    opacity: 1;
    pointer-events: auto;
}
.panel-area {
    min-height: 400px;
    padding: 10px;
}

.button-row {
    height:120px;  
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

div.horizontalgap {
  float: left;
  overflow: hidden;
  height: 1px;
  width: 6px;
}

.buttong {
  height:100px;
  width:100px;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.buttong:hover {background-color: #3e8e41}

.buttong:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


.buttonr {
  height:100px;
  width:100px;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #ff0000;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.buttonr:hover {background-color: #cc0000}

.buttonr:active {
  background-color: #cc0000;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


.buttono {
  height:100px;
  width:100px;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #ff9900;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.buttono:hover {background-color: #cc7a00}

.buttono:active {
  background-color: #cc7a00;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.buttonb {
  height:100px;
  width:100px;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #0066ff;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.buttonb:hover {background-color: #0052cc}

.buttonb:active {
  background-color: #0052cc;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.buttonblank {
  height:100px;
  width:100px;
  font-size: 20px;
  text-align: center;
  color: black;
  font-weight: bold;
  background-color: #bbbbbb;
  border: none;
  border-radius: 15px;
}

.buttonspace {
  height:100px;
  width:100px;
  font-size: 20px;
  text-align: center;
  color: black;
  font-weight: bold;
  background-color: #aaa;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #aaa;
}

.buttonspace.active {
    background-color: #918f8f; 
    color: black;
    font-weight: bold;
    box-shadow: 0 5px #555;
    transform: translateY(4px);
}

.buttonspace.active:hover {
    background-color: #7c7b7b;
}
.buttonblk {
  height:100px;
  width:100px;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #000000;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.buttonblk:hover {
  background-color: #3b3c3d;
  color: #fff;
  font-weight: bold;
  cursor: not-allowed;
}

.buttonblk:active {
  background-color: #697071;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}



.buttonp {
  height:100px;
  width:100px;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #632A8F;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.buttonp:hover {background-color: #452273}

.buttonp:active {
  background-color: #452273;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}