@font-face {
    font-family: TXT;
    src: url('txt.ttf');
}
html, body {
  height: 100%;  
}
#map {
  height: 100%;
  cursor: crosshair;
}
button:hover 
{
    cursor: pointer;
}
.colorpicker {
    cursor: pointer;
    width: 60px;
}

/*#searchtextholder {
    position:absolute; 
    left:45px; 
    top:4px; 
    z-index:1150; 
    width:350px;
}*/
#searchtextholder {
    position: absolute;
    left: 45px;
    top: 4px;
    z-index: 1150;
    width: 250px;
    border: 2px solid #00B8F0;
    border-radius: 5px;
}
#searchtext {
    width: 218px;
    margin-left: 30px;
    font-size: 16px;
    outline: none;
    height: 30px;
    border:0px;
    /*border: 2px solid #00B8F0;
    border-radius: 5px;*/
    background-color: #000000;
    color: #ffffff;
}
#searchtext:focus {
    /*border-shadow: 0 0 8px 0 #00B8F0;
    box-shadow: 0 0 8px 0 #00B8F0;*/
}
#searchtextRecent {
    position: absolute;
    display:none;
    top: 30px;
    left: 0px; 
    height: auto;
    width: 246px;
    border: 2px solid #00B8F0;
    background-color:#000000;
}
#searchtextRecentItemHeader {
    padding: 6px;
    width: 100%;
    font-style: italic;
    color: #e2e2e2;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    /*border-bottom:2px solid #666666;*/
}
.searchtextRecentItem {
    padding-left:22px;
    padding-right:22px;
    padding-top:6px;
    padding-bottom: 6px;
    width: 200px;
    overflow-x: hidden;
    color: #e2e2e2;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.searchtextRecentItem:hover {
    cursor: pointer;
    cursor: hand;
    color: #00B8F0;
    background-color:#111111;
}
/*#searchtext {
    width: 250px;
    padding-left: 30px;
    font-size: 16px;
    outline: none;
    height: 32px;
    border: 2px solid #00B8F0;
    border-radius: 5px;
    background-color:#000000;
    color:#ffffff;
}*/
::placeholder {
    color: white;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: white;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: white;
}

#searchtextbutton {
    border:0px;
    position:absolute;
    left:2px;
    top:6px;
    height:20px;
    width:16px;
}
#searchtextbutton button, button:focus {
    border: 0px;
    outline: none;
    background-color: Transparent;
    background-repeat: no-repeat;
}

a.selFilter {
    color: #00B8F0;
    border-bottom: 2px solid #00B8F0;
    padding: 5px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

a.selFilter:hover {
    /*color:#00ff00;*/
    text-decoration: none;
}

a.noFilter {
    color: #808080;
    border-bottom: 2px solid #808080;
    padding: 5px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

a.noFilter:hover {
    color: #00B8F0;
    text-decoration: none;
}

#mousePositionDiv {
    position: absolute;
    right: 5px;
    bottom: 30px;
    width: 150px;
    text-align: right;
    color: #e2e2e2;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 7px;
    /*background:#808080;
    opacity: 0.9;
    border-radius:4px;*/
}
#topnavbg {
    position: absolute;
    text-align: center;
    top: 0px;
    left: 0px;
    right: 0px;
    padding: 0px;
    /*background-color: #666666;*/
    background-color: #000000;
    height: 40px;
/*    opacity: 0.9;*/
    z-index: 109;
}
#topnav {
     margin:auto;
     top:0px;
     padding:0px; 
     height:40px;
     z-index: 110;
     overflow-y:hidden;
}

/*#topnav {
     position: absolute; 
     text-align: center; 
     top:0px; 
     left: 0px; 
     right: 0px; 
     padding:0px; 
    background-color: #666666;
    height:36px;
    opacity:0.9;
    z-index: 109;
}*/

@media (max-width: 1150px)
{
    #topnav {
        position: absolute;
        left: 300px;
    }
}

#sidenav {
    position: absolute; 
    text-align: center; 
    top: 36px; 
    left: 0px;
    bottom: 0px;
    width: 46px; /*39px;*/ 
    padding:0px; 
    /*background-color: #666666;*/
    background-color: #000000;
    /*opacity:0.9;*/
    z-index: 110;
}

#redlinemenu {    
    z-index: 108;
}

#redlinemenubar {
    z-index: 111;
}
#zoomLevelDiv {
    position: absolute;
    right: 0px;
    top: 180px;
    width: 47px;
    height: 24px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 7px;
    padding-top: 12px;
    background: #000000;
    opacity: 0.9;
    z-index: 10;
    /*border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;*/
}
#resetMapDiv {
    position: absolute;
    /*background-color: #808080;*/
    background-color: #000000;
    background-image: url("../images/reset_map.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    right: 0px;
    top: 221px;
    width: 47px;
    height: 30px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    padding: 7px;
    opacity: 0.9;
    /*border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;*/
    cursor: pointer;
    cursor: hand;
    z-index: 10;
}
#resetMapDiv:hover {
    background-color: #003D4F;
}

#geolocateDiv {
    position: absolute;
    /*background-color: #808080;*/
    background-color: #000000;
    background-image: url("../images/geolocation.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    right: 0px;
    top: 316px;
    width: 47px;
    height: 40px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    padding: 7px;
    opacity: 0.9;
    /*border-radius: 4px;*/
    cursor: pointer;
    cursor: hand;
}
#geolocateDiv:hover {
    background-color: #003D4F;
}
#layersDiv {
    position: absolute;
    /*background-color: #808080;*/
    background-color: #000000;
    background-image: url("../images/layers.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    right: 0px;
    top: 264px;
    width: 47px;
    height: 40px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    padding: 7px;
    opacity: 0.9;
    /*border-radius: 4px;*/
    cursor: pointer;
    cursor: hand;
    z-index:10;
}
#layersDiv:hover {
    background-color: #003D4F;
}
#halfZoomDivUp {
    position: absolute;
    background-color: #000000;
    top: 158px;
    right: 30px;
    width: 30px;
    height: 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 24px;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    padding: 0px;
    opacity: 0.9;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    /*border-radius: 2px;*/
    cursor: pointer;
    cursor: hand;
    z-index:10;
}
#halfZoomDivDown {
    position: absolute;
    background-color: #000000;
    top: 158px;
    right: 0px;
    width: 30px;
    height: 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    padding: 0px;
    opacity: 0.9;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    /*border-radius: 2px;*/
    cursor: pointer;
    cursor: hand;
    z-index:10;
}
#halfZoomDivDown:hover, #halfZoomDivUp:hover {
    background-color: #003D4F;
}
#halfZoomLabel{
    position:absolute;
    background-color:none;
    color:white;
    top:163px;
    right:19px;
    height:20px;
    width:20px;
    font-size:12px;
    font-weight:bold;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    z-index:11;
}
.SearchResult {
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    padding: 5px;
}
.SearchResult:hover {
    color:blue;
    background-color:white;
    cursor: pointer;
    cursor:hand;
}
.SearchResult img{
    width: 25px;
    height:25px;
}
.MapTextSearchResult {
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    padding:5px;
}
.MapTextSearchResult:hover {
    color:blue;
    background-color:white;
    cursor: pointer;
    cursor:hand;
}
.MapTextSearchResult img {
    width: 25px;
    height: 25px;
}
.LocationSearchResult {
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    padding:5px;
}
.LocationSearchResult:hover {
    color:blue;
    background-color:white;
    cursor: pointer;
    cursor:hand;
}
.LocationSearchResult img {
    width: 25px;
    height: 25px;
}
.LocationUdfSearchResult {
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    padding: 5px;
}
.LocationUdfSearchResult:hover {
    color: blue;
    background-color: white;
    cursor: pointer;
    cursor: hand;
}
.LocationUdfSearchResult img {
    width: 25px;
    height: 25px;
}
.SubscriberSearchResult {
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    padding:5px;
}
.SubscriberSearchResult:hover {
    color:blue;
    background-color:white;
    cursor: pointer;
    cursor:hand;
}
.SubscriberSearchResult img {
    width: 25px;
    height: 25px;
}
.SubscriberUdfSearchResult {
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    padding: 5px;
}
.SubscriberUdfSearchResult:hover {
    color: blue;
    background-color: white;
    cursor: pointer;
    cursor: hand;
}
.SubscriberUdfSearchResult img {
    width: 25px;
    height: 25px;
}
.CircuitSearchResult{
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    padding:5px;
}
.CircuitSearchResult:hover {
    color: blue;
    background-color: white;
    cursor: pointer;
    cursor: hand;
}
.CircuitSearchResult img {
    width: 25px;
    height: 25px;
}
/*BoundarySearchResult*/
.BoundarySearchResult {
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    padding: 5px;
}
.BoundarySearchResult:hover {
    color: blue;
    background-color: white;
    cursor: pointer;
    cursor: hand;
}
.BoundarySearchResult img {
    width: 25px;
    height: 25px;
}
/*BoundarySearchResult*/
.featurepopup {
    width: auto;
    height: auto;
    padding: 10px;
    font-size: 14px;
    border: none;
    background-color: #000000;
    border: 1px solid #00B8F0;
    opacity: 0.9;
    color: #e2e2e2;
    border-radius: 5px;
    cursor: pointer; /*cursor:hand;*/
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
.featurepopup a {
    color: #ffffff;
    text-decoration: none;
}
.featurepopup a:hover {
    color: #ff0000;
    text-decoration: none;
}
.btnmain {
    width: auto;
    height: auto;
    padding: 10px;
    font-size: 14px;
    border: none;
    background-color: #007ACC;
    border: 1px solid #007ACC;
    opacity: 0.9;
    color: #e2e2e2;
    border-radius: 5px;
    cursor: pointer; /*cursor:hand;*/
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

.btnmain:hover {
    border: 1px solid #808080;
    background-color: #0095cc;
}

.btnmain:active {
    color: #ff0000;
    text-decoration: none;
}

.btnmain:focus {
    color: #ff0000;
    text-decoration: none;
    border: 1px solid #808080;
    background-color: #0095cc;
}

.btnmainsmall {
    width: auto;
    height: auto;
    padding: 5px;
    font-size: 12px;
    border: none;
    background-color: #007ACC;
    border: 1px solid #007ACC;
    opacity: 0.9;
    color: #e2e2e2;
    border-radius: 2px;
    cursor: pointer; /*cursor:hand;*/
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

.btnmainsmall:hover {
    border: 1px solid #808080;
    background-color: #0095cc;
}

.btnmainsmall:active {
    color: #ff0000;
    text-decoration: none;
}

.btnmainsmall:focus {
    color: #ff0000;
    text-decoration: none;
    border: 1px solid #808080;
    background-color: #0095cc;
}
/*
.btnmain a {
  color: #ffffff;
  text-decoration: none;
}


.btnmain a:hover{
  color: #ff0000;
  text-decoration: none;
}
*/



.debuglink a{
    color: white;
    text-decoration: none;
}
.debuglink a:hover {    
    text-decoration: underline;
}
.panels-div {
  position: absolute;
  float: left;
  display: none;
  width: 450px;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #e0e0e0;
  border-right: 1px solid #808080;
  opacity: 0.95;
  font-size:12px;
  padding: 5px;
  bottom: 0px;
  top: 36px;
  color: #000000;
  /*
  overflow-y: auto;
  overflow-x: hidden;
  */
}
.panels-div-content {
    position: absolute;
    top: 50px;
    bottom: 0px;
    width: 450px;
    overflow-y: auto;
    overflow-x: auto;    
}
.panels-narrow-div-content {
    position: absolute;
    top: 50px;
    bottom: 0px;
    width: 350px;
    overflow-y: auto;
    overflow-x: hidden;
}
.slide-panels-div {
    position: absolute;
    float: left;
    width: 450px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #e0e0e0;
    border-right: 1px solid #808080;
    opacity: 0.95;
    font-size: 12px;
    padding: 5px;
    bottom: 0px;
    top: 40px;
    left: -500px;
    color: #000000;
    /*border:1px solid #eee;*/
    /*margin-bottom:10px;*/
    transition: left 0.5s;
    -moz-transition: left 0.5s; /* Firefox 4 */
    -webkit-transition: left 0.5s; /* Safari and Chrome */
    -o-transition: left 0.5s; /* Opera */
}

.slide-panels-narrow-div {
    position: absolute;
    float: left;
    width: 350px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #e0e0e0;
    border-right: 1px solid #808080;
    opacity: 0.95;
    font-size: 12px;
    padding: 5px;
    bottom: 0px;
    top: 40px;
    left: -500px;
    color: #000000;
    /*border:1px solid #eee;*/
    /*margin-bottom:10px;*/
    transition: left 1s;
    -moz-transition: left 1s; /* Firefox 4 */
    -webkit-transition: left 1s; /* Safari and Chrome */
    -o-transition: left 1s; /* Opera */
}

#exportmenu {
    position: absolute;
    text-align: center;
    top: -50px;
    left: 0px;
    bottom: 0px;
    width: 200px;
    height: 44px;
}

#reportsubmenu {
    position: absolute;
    text-align: center;
    top: -50px;
    left: 0px;
    bottom: 0px;
    width: 200px;
    height: 44px;
}

.slide-submenu-div {
    /*position: absolute;
    text-align: center;
    top: -50px;
    left: 0px;
    bottom: 0px;
    width: 200px;
    height: 44px;*/
    padding: 0px;
    background-color: #000000;
    opacity: 0.9;
    transition: top 0.5s;
    -moz-transition: top 0.5s; /* Firefox 4 */
    -webkit-transition: top 0.5s; /* Safari and Chrome */
    -o-transition: top 0.5s; /* Opera */
}

.slide-mapmenu-div {
    position: absolute;
    /*display:none;*/
    text-align: center;
    top: -500px;
    right: 62px;
    /*bottom: 0px;*/
    width: 200px;
    /*height: 300px;*/
    padding: 0px;
    background-color: #000000;
    opacity: 0.9;
    transition: top 0.5s;
    -moz-transition: top 0.5s; /* Firefox 4 */
    -webkit-transition: top 0.5s; /* Safari and Chrome */
    -o-transition: top 0.5s; /* Opera */
}

th, td {
    padding: 2px;    
}

.panelTable {
    border:0px;
    border-collapse:collapse; 
    border-spacing:0;
}

.panelTable th, td {
    padding: 3px;
}

.titlebar {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  /*font-family: 'Open Sans Condensed','Quicksand', sans-serif;*/
  font-size:18px;
  /*font-weight:bolder;*/
  vertical-align: top;
  color: #303030;
  /*font-weight: bold;*/
  width: 100%;
}

a.closepanelbutton {
    cursor: pointer;
    display: block;
    width: 30px;
    height: 30px;
    background: url(../images/close.png) no-repeat center center;
    background-size: contain;
    /*cursor: hand;  */
}
a.closepanelbutton:hover {
    background: url(../images/close-hover.png) no-repeat center center;
    background-size: contain;
}


.autoclose {
    max-height:20px;
    overflow:hidden;

    /*border:1px solid #eee;*/
    /*margin-bottom:10px;*/
    
    transition: max-height 1s;
    -moz-transition: max-height 1s; /* Firefox 4 */
    -webkit-transition: max-height 1s; /* Safari and Chrome */
    -o-transition: max-height 1s; /* Opera */
}


.autoclose:hover {
    /*max-height:800px;*/
    cursor: pointer;    
    /*background-color: rgb(100,149,237);*/
    opacity: .75;
}


.ol-dragzoom {
  border-color: #000000;
  border-width: 3px;
  background-color: Transparent;
}

.ol-scale-line {
  background:#000000;
  opacity: 0.9;
  border-radius:4px;
  bottom:10px;
  left: 50%; transform: translateX(-50%);
  padding:2px;
  position:absolute;
  font-family: Arial, Helvetica, sans-serif;
}

.ol-scale-line-inner {
  border:1px solid #ffffff;
  border-top:none;
  color:#e2e2e2;
  background-color:#000000;
  font-size:14px;
  font-family: Arial, Helvetica, sans-serif;
  text-align:center;
  margin:1px;
  will-change:contents,width;
}

.ol-control {
  top: 100px;
  /* bottom: 10px; */
  right: 15px;
  left: auto;
  z-index:101;
}

.ol-control button{
  background:#000000;
  opacity: 0.9;
  cursor: pointer; /*cursor: hand;*/
  z-index:101;
}
.ol-control button:hover {
    background-color: #003D4F;
}

.navbutton {
    margin: 0px;
    padding: 4px 7px 4px 7px;
    /*padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 7px;
    padding-left: 7px;*/
    background-color: Transparent;
    background-repeat: no-repeat;
    border: 0px;
    text-align: center;
    cursor: pointer; /*cursor: hand;*/
    outline: none;
}

.navbutton:hover {
    /*background-color: #e2e2e2;*/
    background-color: #003D4F; /*#00B8F0*/
}
.navbutton img {
    width: 32px;
    height: 32px;    
}
.img-normal {
    width: 32px;
    height: 32px;
}
.img-header {
    width: 25px;
    height: 25px;
}
.img-search {
    width: 25px;
    height: 25px;
}



.tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif;
}

.tooltip-measure {
  opacity: 1;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

.tooltip-static {
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
  font-family: Arial, Helvetica, sans-serif;
}

.tooltip-measure:before,
.tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);  
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}

.tooltip-static:before {
  border-top-color: #ffcc33;
}    

.spinner {
  position: absolute;
  margin: 100px auto;
  width: 50px;
  height: 40px;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -20px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  /*background-color: #336699;*/
  background-color:#FF6700;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.udfheader {
    background-color: rgb(50,205,50);
    background-color: rgba(50,205,50,0.5);
    border: 1px solid;
    border-color:rgb(50,205,50);
    font-weight:bold;
}

.dataheader {
    background-color: rgb(0,184,240);
    background-color: rgba(0,184,240, 0.5);
    border: 1px solid;
    border-color: #00B8F0;
    font-weight: bold;
}

.redlinetext {
    position:absolute;
    left:50%;
    top:50%;
    min-width: 50px;
    resize: both;
    overflow: auto;
    color: red;
    padding: 10px;
    font-family: Arial;
    font-size: 14px;
    overflow: hidden;  
}
.redlinetext:hover {
    border:1px dashed #e2e2e2;
    cursor:move;
}
.redlineitem{
    border: 1px dashed #000000;
    padding-bottom:2px;
}
.redlineitem img{
    width:32px;
    height:32px;
}

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

/* custom scrollbars */
/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* custom checkboxes */
/*
input[type=checkbox] + label {
    display: block;
    margin: 0.2em;
    cursor: pointer;
    padding: 0.2em;
}



input[type=checkbox] {
    display: none;
}

input[type=checkbox] + label:before {
    content: "\2714";
    border: 0.1em solid #000;
    border-radius: 0.2em;
    display: inline-block;
    width: 1em;
    height: 1em;
    padding-left: 0.2em;
    padding-bottom: 0.3em;
    margin-right: 0.2em;
    vertical-align: bottom;
    color: transparent;
    transition: .2s;
}

input[type=checkbox] + label:active:before {
    transform: scale(0);
}

input[type=checkbox]:checked + label:before {
    background-color: #007ACC;
    border-color: #007ACC;
    color: #fff;
}

input[type=checkbox]:disabled + label:before {
    transform: scale(1);
    border-color: #aaa;
}

input[type=checkbox]:checked:disabled + label:before {
    transform: scale(1);
    background-color: #bfb;
    border-color: #bfb;
}
label {
    padding: 5px;
}
*/