html, body {font-family:Arial;font-size:1em;color:#000000;margin:0;padding:0;}
#wrapper {width:95%;margin-left: auto;margin-right: auto;}
#content {width:100%;margin-left: auto;margin-right: auto;background-color:#FFF;}
#header {width:100%;height:65px;text-align:right;background-color:#FFF}
.header-img {margin:5px;}
.header-text {float:right;margin:5px;font-size:9pt;}
#header-nav {width:100%;}
#footer {width:100%;margin:0 auto;padding:0px;margin-top:0px;}
#login {margin: 0px auto;margin-top:50px;width:400px;border:1px solid #DCDCDC;background-color:#00FF00;text-align:center;}
#pop-wrapper {margin:0 auto;min-height:100%;width:99%;background-color:#FFFFFF;margin-top:10px;border:1px solid #DCDCDC;}
#pop-content {margin:0 auto;padding:2px 10px 10px 10px;}
#clear {clear:both;}

select, textarea, table {text-align:left;font-family: Arial, Verdana, Geneva, Arial, sans-serif;font-size:9pt;line-height:135%;color:#000000;}
table.default {border:1px solid #DCDCDC;}
input {text-align:left;font-family: Arial, Verdana, Geneva, Arial, sans-serif;font-size:9pt;line-height:135%;color:#000000;}
input.button{text-align:center;}
h1 {text-align:left;font-size:11pt;line-height:135%;color:#000000;}
h2 {text-align:left;font-size:11pt;line-height:135%;color:#000000;border-bottom:1pt solid #F1F5F2;}
p {text-align:left;font-size:9pt;line-height:135%;color:#000000;}

.blackbox {border: 1px solid #000000;padding:5px;}
.editaddbox {background-color:#FFFFFF;margin:0px 15px 0px 15px;border:1px solid #FFFFFF;}
.boxw {background-color:#FFFFFF;padding:10px;margin:10px 0px 10px 0px;border:1px solid #DCDCDC;}
.boxb {background-color:#B0E0E6;padding:10px;margin:10px 0px 10px 0px;}
.boxg {background-color:#DCDCDC;padding:10px;margin:10px 0px 10px 0px;}

.row {display: flex;flex-wrap: wrap;padding: 0 4px;}
.column {flex: 40%;max-width: 50%;}
.hpbox {margin:5px 5px 10px 5px;border:1px solid #DCDCDC;}

@media only screen and (max-width: 768px) {
#wrapper {width:100%;margin-left: auto;margin-right: auto;}
#login {width:100%;margin-left:auto;margin-right:auto;background-color:#00FF00;text-align:center;}
.column {flex: 100%;max-width: 100%;}
}

A:link {font-size:9pt;color:#0000FF;font-weight:normal;text-decoration:none;}
A:visited {font-size:9pt;color:#0000FF;font-weight:normal;text-decoration:none;}
A:hover {font-size:9pt;color:#FF0000;font-weight:normal;text-decoration:underline;}
A:active {font-size:9pt;color:#FF0000;font-weight:normal;text-decoration:none;}

A.b:link {font-size:9pt;color:#0000FF;font-weight:bold;text-decoration:none;}
A.b:visited {font-size:9pt;color:#0000FF;font-weight:bold;text-decoration:none;}
A.b:hover {font-size:9pt;color:#FF0000;font-weight:bold;text-decoration:underline;}
A.b:active {font-size:9pt;color:#FF0000;font-weight:bold;text-decoration:none;}

.designport:link {font-size:7pt;color:#0000FF;font-weight:normal;text-decoration:underline;}
.designport:visited {font-size:7pt;color:#0000FF;font-weight:normal;text-decoration:underline;}
.designport:hover {font-size:7pt;color:#0000FF;font-weight:normal;text-decoration:none;}
.designport:active {font-size:7pt;color:#0000FF;font-weight:normal;text-decoration:none;}

input.fw {width:95vw;padding: 8px 8px;font-size:1.2em;border: 1px solid #000000;}
input.fwr {width:95vw;padding: 8px 8px;font-size:1.2em;border: 1px solid #FF0000;}
input.sw {padding: 8px 8px;font-size:1.2em;border: 1px solid #000000;}
input.swr {padding: 8px 8px;font-size:1.2em;border: 1px solid #FF0000;}
textarea.fw {width:95vw;height:80vh;padding:8px;border: 1px solid #000000;display: block;}
textarea.fwshort {width:95vw;height:5vh;padding:8px;border: 1px solid #000000;display: block;overflow: hidden;}
.buttonfw {width:100%;margin-top:15px;margin-bottom:30px;text-align:center;padding:10px;font-size: 1.5em;background-color: #4CAF50;color: #fff;border: 1px solid #000;}
.buttonfw:hover {background-color: #eee;color: #00f;border: 1px solid #c7c7c7;}

.navbar {
  overflow: hidden;
  background-color: #333;
  width:100%;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 12px 8px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 12px 8px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

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

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

/* TOOLTIP START */
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: left;
  padding: 5px;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
/* TOOLTOP END */