body
{
  font-size: 1em !important;
  color: #000 !important;
  font-family: Arial !important;
}

a:link {
  text-decoration: none;
  color: #0000CC ;
}

a:visited {
  text-decoration: none;
  color: #551A8B;
}

a:hover {
  text-decoration: underline;
  color: blue ;
}

a:active {
    text-decoration: underline;
	color: #0000CC ;
}

.iconLink:visited {
  color: #303030 ;
}
.iconLink:link {
  color: #303030 ;
}
.iconLink:hover {
  color: blue ;
}
.iconLink:active {
  color: #303030 ;
}

.center-div
{
     margin: 0 auto;
     width: 80%; 
}

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
  min-height:100%;
  position:relative;
  <!--[if IE 5]>
  height:100%;
  <![endif]-->
  <!--[if IE 6]>
  height:100%;
  <![endif]-->
}

img.topLogo { max-width: 100%;}

#banner {
   background:#FFFFFF;
   padding:5px;
}
#main {
  padding:0px;
  width:100%;
  padding-bottom:80px;   /* Height of the footer */
  background:#ffffff;
}

#chart {
  padding:0px;
  width:100%;
  background:#ffffff;
}

.footerclass { /*position fixed if we want it to stay in place*/
   position:absolute;
   bottom:0;
   padding:0px;
   width:100%;
   height:75px;   /* Height of the footer */
   line-height: 1.6;
   font-family: Arial !important;
   background:#FFFFFF;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
}

td, th {
  border: 0px solid #dddddd;
  text-align: left;
  padding: 4px;
  padding-right: 10px;
  font-family: "Arial", 'sans-serif';
}

h4 {
  font-family: "Arial", 'sans-serif';
}

.alarmEditor {
  width:98%;
  height:64vh;
  padding: 10px 5px;
  font-size: 1em;
  line-height:1.1;
  border: 0px;
  outline-width: 0;
  resize: none;
}

.alarmOutput {
  width:98%;
  height:64vh;
  padding: 10px 5px;
  font-size: 1em;
  line-height:1.1;
  text-align:left;
  border: 0px;
  outline-width: 0;
  resize: none;
}

.alarmHelp {
  width:98%;
  height:64vh;
  padding: 10px 5px;
  font-size: 1em;
  line-height:1.1;
  text-align:left;
  border: 0px;
  outline-width: 0;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  //white-space: nowrap;
  -webkit-text-size-adjust: 100%;
  webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none;
  }
}
.opReturnPre {
  max-width: 93%;
  text-align: left;
  overflow-x: auto;
  overflow-y: hidden;
  font-size:1.3em;
  font-family:monospace;
  word-break: break-all; 
  word-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none;
  }
}

.opReturnText {
  max-width: 93%;
  text-align: left;
  overflow-x: auto;
  overflow-y: hidden;
  word-break: break-all; 
  word-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none;
  }
}

.opReturnHex {
  max-width: 93%;
  text-align: left;
  overflow-x: hidden;
  overflow-y: auto;
  word-break: break-all; 
  word-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none;
  }
}
.opReturnData {
  max-width: 93%;
  width: 93%;
  text-align: left;
  word-break: break-all; 
  word-wrap: break-word;
  -webkit-text-size-adjust: 100%;  
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

.slideTable {
  max-width: 93%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-text-size-adjust: 100%;
  webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none;
  }
}

.slideChart {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none;
  }
}
.inputField {
  font-size:1em;
  padding: 5px;
  background:#FFFFFF;
  border: 1px solid #000088;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

.searchBtn {
  background-color: white;
  border: none;
  color: #0000EE;
  padding: 0px 0px;
  font-size: 20px;
  cursor: pointer;
}

/* The Modal (background) */
.modalBoxBack {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 25px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modalBoxFrame {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 70%;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.wraprow {
  word-break: break-all; 
  word-wrap: break-word;
  padding: 10px;
}

/* Modal Content */
.modalBoxContent {
  background-color: #fefefe;
  margin: auto;
  padding: 0px;
  width: 100%;
}

/* The modal Box Button (span) */
.modalBoxBtn {
  color: #0000CC;
  //float: right;
  //font-size: 20px;
  //font-weight: bold;
}

.modalBoxBtn:hover,
.modalBoxBtn:focus {
  color: blue;
  text-decoration: none;
  cursor: pointer;
}

/* The Close Button (span) */
.closeModalBox {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closeModalBox:hover,
.closeModalBox:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 200px; /* Full-width */
  height: 20px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 20px; /* Set a specific slider handle width */
  height: 20px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 20px; /* Set a specific slider handle width */
  height: 20px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}


.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  text-align: left;
  background-color: #f1f1f1;
  min-width: 160px;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  padding-top: 20px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

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

.dropdown:hover .dropbtn {background-color: #3e8e41;}

/* lua scripting page tabs */
.tab {
  width:95%;
  font-size: 1em;
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  font-size: 1em;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  width:95%;
  height:66%;
  padding: 0px;
  font-size: 1em;
  line-height:1.1;
  border: 1px solid #ccc;
}