#ng_app, #ERMA_App, #ERMA_App body, #ng_app body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  -webkit-user-select: none;
  font-size: 14px;
  color: #111111;
  background-color: white;
}

#ERMA_App h1, #ng_app h1 {
  font-size: 16px;
  margin: 0;
  padding: 4px;
  background-color: transparent;
}

h1 {
  color: #403421;
  margin: 2px;
  font-size: 1.3em;
}

h2 {
  color: #473d3d;
  margin: 6px 0 1px 0px;
  text-decoration: underline;
}
h3 {
  color: #5F5657; 
  font-size: 16px;
  margin: 6px 0 1px 0px;
  font-weight: bold;
}
h4 {
  font-weight: bold;
  color: #3a3a3a; 
  font-size: 14px;
  margin: 6px 0 2px 0px;
}

ul, ol {
  margin: 0 0 0 20px;
  padding: 0;
}

.clear { clear: both !important; }
.invisible { visibility: hidden !important; }
.ralign { text-align: right !important; }

.widgettip {
  display: none;
  border: 1px solid #dcbd4d;
  position: absolute;
  background-color: #fff1be;
  top: 20px;
  left: 100px;
  right: 20px;
  height: 100px;
  overflow: auto;
  padding: 5px;
  font-size: 12px;
  z-index: 999999999;
}
input:focus + .widgettip {
  display: block;
}


.recform {
  max-width: 700px;
  margin: auto;
}
.recform small {
  color: #777;
  font-size: 10px;
}
.recform h1 {
  text-align: center;
}
.recform select {
  max-width: 500px;
}
.recform textarea {
  width: 90%;
}

.fieldnote {
  margin-left: 6px;
  color: #888888;
}

.recform .row {
  position: relative;
  background-color: white;
  overflow: hidden;
  clear: both;
  padding: .2em;
  margin: .2em;
  border-top: 0px solid #ddd;
}
.recform .row + .row {
  border-top-width: 1px;
}

.recform fieldset .row {
  border: 0;
}

.recform .photothumbnail {
  width: 205px; 
  background-color: #efefef;
}

.recform .row label { 
  color: #222;
  text-align: left;
  margin-right: 6px;
  font-weight: bold;
  width: 8em;
}

.recform .row > * {
  display: inline-block;
}

.msg {
  font-weight: bold;
  font-size: 12px;
  color: #990000;
  text-align: center;
}

.msg ul {
  list-style: none;
  margin: 0;
}

.msgbox, #MessageBox {
  border: 2px outset #476a70;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px 6px 6px 6px;
  width: 400px;
  margin: auto;
  background-color: #efefef;
  padding: 10px;
  overflow: hidden;
  z-index: 99999999;
  color: #666;
  font-weight: bold;
}

#MessageBox {
  display: none;
  height: 60px;
  position: fixed;
  top: 50px;
  left: 50%;
  margin-left: -350px;
}

.titlebar {
  background-color: #476a70;
  color: white;
  padding: 6px;
  font-weight: bold;
}

.titlebar .sysidtxt,
.titlebar .lastmodtxt {
  font-weight: normal;
  margin-left: 20px;
  font-size: 12px;
  float: right;
}

.commandbuttonbar {
  text-align: right;
}

.commandbuttonbar button {
  font-size: 1.4em;
  margin: 6px;
}

/* styles for horizontal def lists */
dl.horizontal {
  height: 20px;
  margin: 0;
  padding-left: 10px;
}

dl.horizontal dt {
  font-weight: bold;
  float: left;
  height: 100%;
  line-height: 1.3;
  font-size: 14px;
}

dl.horizontal dd {
  float: left;
  width: 100px;
  margin-left: 5px;
  height: 100%;
  line-height: 1.3;
  font-size: 14px;
}

/* styles for tab menus */
ul.tabmenu {
  background: #e5e3df;
  position: relative;
  margin: 0;
  padding: 0;
  list-style-type: none;
  color: #5f5657;
  height: 20px;
  font-size: 16px;
}
ul.tabmenu a {
  color: inherit !important;
}

ul.tabmenu > li {
  height: 100%;
  float: left;
  padding-right: 6px;
  padding-left: 6px;
  line-height: 1.3;
  position: relative;
  border-right: 1px solid #ccc;
  cursor: pointer;
}
ul.tabmenu > li:hover {
  background-color: #887a53;
  color: white;
}
ul.tabmenu > li.selectedtab {
  color: white;
  background-color: #476a70;
}

.tabcontent {
  position: relative;
  display: none;
}
.tabcontent.selectedtab {
  display: block;
}

.tabcontent h3 {
  padding: 4px 6px;
  margin: 0;
}

#deactivatescreenoverlay {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 999999998;
}


#deactivatescreenoverlay.shade {
  cursor: wait;
  filter: alpha(opacity=20);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  opacity: 0.2;
  background-color: black;
}

.smallmodalbox {
  display: none;
  position: fixed;
  top: 120px;
  left: 50%;
  margin-left: -150px;
  width: 300px;
  //height: 350px;
  border: 2px outset black;
  z-index: 999999999;
  background-color: #efefef;
  cursor: default;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px 6px 6px 6px;
  -moz-box-shadow: inset 0 0 5px #ccc;
  -webkit-box-shadow: inset 0 0 5px #ccc;
  box-shadow: inner 0 0 5px #ccc;
}
.largemodalbox {
  display: none;
  position: fixed;
  top: 10px;
  left: 50%;
  margin-left: -300px;
  width: 600px;
  height: 400px;
  border: 2px outset black;
  z-index: 999999999;
  background-color: #efefef;
  cursor: default;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px 6px 6px 6px;
  -moz-box-shadow: inset 0 0 5px #ccc;
  -webkit-box-shadow: inset 0 0 5px #ccc;
  box-shadow: inner 0 0 5px #ccc;
}

/* css-tree required css - see: http://x.sr.unh.edu/css-tree */
.tree * {
  vertical-align: middle;
}
.tree { margin: 0 0 0 4px; }
.tree,.tree ul {
  list-style-type: none;
  position: relative;
  padding: 0;
  cursor: default;
  border-left: 1px dotted #ccc;
}
.tree ul {
  margin: 0;
  display: none;
} 
.tree li {
  position: relative;
  margin: 0 0 0 10px;
  padding: 2px 0 2px 0;
}
/* extend a line to the list item */
.tree li:before {
  position: absolute;
  top: 9px; left: -9px; height: 1px; width: 5px;
  border-top: 1px dotted #ccc;
  content: ' ';
}
/* erase all lines for last item */
.tree li:last-child:after {
  position: absolute;
  top: 17px; left: -13px; height: 100%; width: 7px;
  background-color: white;
  content: ' ';
}
/* add expander widget */
.tree .expander {
  background: #fff url(../img/sprites.png) no-repeat scroll;
  background-position: -64px -4px;
  position: absolute;
  top: 8px; left: -15px;
  height: 9px; width: 9px;
  cursor: pointer;
}
/* add expander widget */
.tree .expanderbox {
  background-position: -64px -4px;
  position: absolute;
  top: 8px; left: -15px;
  height: 9px; width: 9px;
  cursor: pointer;
  display: block;
}
.tree .expander:hover { background-color: #eee; }
.tree .expander.expanded { background-position: -78px -4px; }
.tree ul.expanded { display: block; }
/* END - css-tree required css */

/* css tree command panel adjustments */
#command_panel .tree li:last-child:after {
  background-color: #efefef;
}
#command_panel .tree li:last-child:after {
  top: 16px;
}
#command_panel .tree .expander {
  top: 3px; 
}
/* add padding so selections look better */
#layer_selection_picker .tree li .descr,
#layer_selection_picker .tree li h4,
#savedviewcontentarea a,
.toc_view,
#BaseLayerDataSetMenuElem span {
  padding: 2px 4px;
  border-radius: 4px;
}

#command_panel .tree li {
  margin-left: 8px;
  padding-top: 3px;
}

#command_panel .tree .expander {
  left: -13px;
  top: 6px;
}

/* show remaining chars styles */
.remainingChars {
  color: #777;
  font-size: 9px;
  visibility: hidden;
}

/* START menu CSS */
.hmenu,.vmenu,.hmenu ul,.vmenu ul {
  background-color:#ddd; color:black;
  margin:0; padding: 0;
  list-style-type:none;
  position:absolute;
  border:1px outset #ccc;
  top: 0; left: 0;
  width: 124px;
}
.hmenu { width: auto; }
.hmenu li li,.vmenu li,.hmenu ul a,.vmenu a {
  display:block;
  margin:0;
  padding: 5px;
}

.hmenu a,.vmenu a {
  text-decoration: none;
  font-family:inherit;
  cursor:inherit;
  font-size:inherit;
  color: inherit;
}
.hmenu ul a,.vmenu a {
  position: absolute;
  top:0;left:0;right:0;bottom:0;
}
.hmenu li,.vmenu li {
  font-family:"Verdana",sans-serif;
  position:relative;
  background-repeat: no-repeat;
  background-position: 4px 10px;
  cursor:default;
  font-size:11px;
  color: black;
  height: 1.2em; 
}

.contextmenuarea,.contextmenuarea * { cursor: default; }
.hmenu > li {
  padding: 2px 4px;
  margin: 2px;
  float: left;
}
.hmenu > li { border: 1px outset transparent; }
.hmenu > li:hover {border-color: #666; }
.hmenu > li.disabled:hover {border-color: transparent; }
.vmenu li > ul,.hmenu li > ul { border-width: 0; }
.vmenu li:hover > ul,.hmenu li:hover > ul { border-width: 1px; }
.hmenu ul {left:-3px;top: 100%;}
.hmenu ul ul,.vmenu ul {left:99%;top:0;}
.hmenu li li:hover, .vmenu li:hover {background-color:#0a246a; color:white;}
.hmenu li.disabled, .vmenu li.disabled {
  color: #999 !important;
  background-color: transparent !important;
}
.contextmenuarea > .vmenu,
.contextmenuarea + .vmenu { z-index: 99999999; }
.contextmenuarea > .vmenu,
.contextmenuarea + .vmenu,
.hmenu li > ul, .vmenu li > ul,
.hmenu li.disabled:hover > ul,
.vmenu li.disabled:hover > ul { display: none; }
.hmenu li:hover > ul,
.vmenu li:hover > ul { display: block; }
.menuseparator {border-top: 2px groove #eee;}
/* END menu CSS */


/* ERMA menu style overrides */
.hmenu li,.vmenu li{
  background-color:#e5e3df; color:#330; border-color: #476a70;
  -moz-box-shadow: inset 0 0 2px #ccc;
  -webkit-box-shadow: inset 0 0 2px #ccc;
  box-shadow: inner 0 0 2px #ccc;
}
#ERMA_App .hmenu li:hover, #ERMA_App .vmenu li:hover, #ng_app .vmenu li:hover, #ng_app .vmenu li:hover {
  background-color:#887a53; color:white;
}

#mainmenu, #mainmenu-right {
  top: 48px;
  height: 18px;
  background-color: transparent;
  z-index: 2001;
  border: 0;
}

#mainmenu-right {
  right: 0;
  left: auto;
}
#AdminMenuItem > ul {
  width: 140px; 
}

#mainmenu > li, #mainmenu-right > li {
  font-size: 13px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  border-radius: 6px 6px 0px 0px;
  border-style: solid solid none;
  border-width: 1px 1px 0;
  margin: 0 -1px 0 0;
}

#mainmenu li a, #mainmenu-right li a {
  color: #330; 
}
#mainmenu li a:hover, #mainmenu-right li a:hover {
  color: white;
}





/* ------ Page Layout ----------------------------- */

#header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 69px; 
  border-bottom: solid #476a70 1px;
  overflow: hidden;
}

#searchbox {
  position: absolute; top: 40px; left: 400px; width: 350px; color: #666;
}

#oneColumnMainContent {
  position: absolute;
  border: 1px solid #cccccc;
  padding: 20px;
  top: 100px;
  left: 10%;
  right: 10%;
  bottom: 100px;
  overflow: auto;
}


/* style overrides when command panel is hidden */
#mapcontent.CommandPanelOff #map {
  right: 0;
}
#mapcontent.CommandPanelOff #command_panel {
  display: none;
}

#mapcontent {
  position: absolute;
  left: 0;
  right: 0;
  top: 70px;
  bottom: 40px;
  overflow: hidden;
}

#map, .mapoverlay, .mapoverlay2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 420px;
  bottom: 20px;
  overflow: hidden;
  width: auto;
  height: auto;
}

.mapoverlay {
  opacity:    0.5; 
  background: #000; 
  z-index:    10;
}

#command_panel {
  position: absolute; 
  top: 0;
  right: 0;
  bottom: 20px;
  width: 419px;
  border-left: solid #476a70 1px;
  font-size: 12px;
  overflow: hidden;
  z-index: 1;
}

#command_panel ul.tabmenu {
  height: 15px;
  border-bottom: 1px solid #cccccc;
  font-size: 12px;
}

#command_panel .tabcontent {
  background-color: #efefef;
  overflow: auto;
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  bottom: 0;
}


.CleanMode #savedview_selection_panel_cmdbar_status_txt,
.CleanMode button:not(.login),
.CleanMode .olControlNavToolbar,
.CleanMode .olControlPanZoomBar,
.CleanMode #mainmenu,
.CleanMode #mainmenu-right,
.CleanMode #searchbox,
.CleanMode #toggleCommandPanelBut,
.CleanMode #clearAllLayers,
.CleanMode #LayerAdminPanel,
.CleanMode #ManageLayersToggle,
.CleanMode #CollapseAllLayersBut,
.CleanMode #layer_selection_picker li.DataSetMenuElem > a.clearLayers,
.CleanMode #CleanGUIBut {
  visibility: hidden !important; 
}
.CleanMode .tabmenu {
  display: none;
}
.CleanMode #command_panel .tabcontent {
  top: 0 !important;
}
.CleanMode #command_panel * {
  overflow: hidden !important;
}
#toggleCommandPanelBut, #CleanGUIBut {
  position: absolute;
  font-size: 10px;
  bottom: 0;
  right: 0;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px 6px 6px 6px;
  font-weight: bold;
  z-index: 99999;
}
#CleanGUIBut {
  right: 30px;
}


/* -- START css for defining layout and styles used to display output data
      from controls such as get area, get length, mouse coords */
#MapData {
  background-color: #E5E3DF;
  border-bottom:1px solid #999999;
  border-top:1px solid #999999;
  font-size: 80%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18px;
}
#MapDataLocation {
  width: 200px;
}
#MeasurementValWrapper {
  width: 200px;
}
a.MeasurementUnitsSystem {
  text-decoration: none;
  outline: none;
  cursor: pointer;
  color: #5656ff;
}

a.MeasurementUnitsSystem:hover { 
  color: #5656ff;
  text-decoration: none;
  font-weight: bold;
}

#MeasurementValWrapper sup {
  line-height: 0px;
  font-size: 10px;
}

/* -- END css for defining layout and styles used to display output data
      from controls such as get area, get length, mouse coords */

.tree h4 { margin: 0; padding: 0; display: inline; }

#layer_selection_panel h4[title='view metadata']:hover,
.DataSetLayerElem > span.descr:hover {
  text-decoration: underline; 
}

#layerpanel {
  overflow: hidden;
}

#layer_selection_panel.ManageModeEnabled h4,
#layerpanel.editmode1 h4,
#layer_selection_panel.ManageModeEnabled span.descr,
#layerpanel.editmode1 span.descr {
  text-decoration: none !important;
}


/* -- START css for the layer selector panel */
#ShowAllLayersBut {
  color: black !important;
  font-weight: bold;
  display: none;
}
#layer_selection_picker input {
  cursor: pointer;
  margin-left: -2px;
  margin: 0;
}
.some_selected {
    opacity: 0.5;
    filter: alpha(opacity=50);
}
#layerpanel a.ExtractDataLink img {
  border: 0;
  height: 12px;
}

#layer_selection_picker, #savedviewcontentarea {
  position: relative;
  overflow: auto;
  margin-left: 6px;
}

#layer_selection_picker .expander {
  top: 4px;
}
#LayerMenu li.disabled {
  display: none;
}

#layer_selection_picker a.icon {
  height: 14px;
  width: 14px; 
  background-image: url(exticons/unknown.jpg);
  display: inline-block;
  cursor: pointer;
  margin-left: 2px;
}
#layer_selection_picker .tree li:last-child:after {
  background-color: #efefef;
}
#LayerAdminPanel, 
.admin_panel {
  position: absolute;
  right: 20px;
  top: 22px;
  height: 0;
  width: 65px;
  display: none;
}

.admin_panel {
  display: block;
  top: 5px;
  right: 5px;
}

.DataSetMenuElem.selected > h4,
.DataSetLayerElem.selected > .descr,
#savedview_selection_picker a.selected {
  background-color: #476A70;
  color: white;
}
.DataSetLayerElem > span.descr:hover {
  text-decoration: underline;
}



.priv_layers_archive {
  color: #990000;
}

.priv_layers_testing {
  color: #33A1DE;
}

.priv_archive {
  color: #990000;
}

.priv_testing {
  color: #33A1DE;
}


/* Self clearing floats - add "group" class to containing element to clear contained floating elements */
.group:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
		}
	


/* These are used for angular.  The reality here is that jQuery is binding
   with no scope to all the ".tree .expander" classes, which means it then 
   conflicts with  the Angular components - this allows us to bypass that using
   a different class, but providing the same results. */

/* Remove the default bullet style - we need to use our own images for this
   so we can allow them to be clicked separately from the string/element in the 
   list.  Move the list indent over a bit more than normal as well. */
.toc_tree ul,
.toc_tree li
{
    list-style-type: none;
    padding: 0;
    margin-left: 1em;
    position: relative;
}

/* We use a div below the text and relocate it to where the 
   LI image would have been, so it can be clickable */
.toc_tree .expander {
  background: #fff url(../img/sprites.png) no-repeat scroll;
  background-position: -64px -4px;
  top: 6px; left: -30px;
  height: 9px; width: 9px;
  cursor: pointer;
  position: absolute;
}



.toc_tree .expander-box {
  background-position: -64px -4px;
  top: 1px; left: -15px;
  height: 12px; width: 12px;
  cursor: pointer;
  position: absolute;
}

.toc_tree .expander-site {
  left: -15px;
}


/* When the element is expanded, move to the sprite that shows the expanded 
   icon (the - symbol) */
.toc_tree .expander.expanded { background-position: -78px -4px; }

/* Inline display makes things more compact, and also allows us to select
   only the text, not the entire block as with the default display */
.toc_tree h4 {
  display: inline;
}

.toc_tree h4.selected {
  background-color: #476A70;
  color: white;
}

.toc_tree h4:hover {
  text-decoration: underline;
}

.css-form input.ng-invalid,
.css-form textarea.ng-invalid {
   background-color: #FFEBE6;
}

/* .css-form textarea.ng-valid.ng-dirty,  
.css-form input.ng-valid.ng-dirty {
   background-color: #78FA89;
} */

/* A semi-transparent overlay to put atop a tab panel */
.tabcontent .overlay {
  z-index: 100;
  height: 100%;
  width: 100%;
  filter:alpha(opacity=80);
  opacity:.8;
  position: absolute;
  background-color:#b0c4de;
} 
.tabcontent .overlay span {
   width: 100%;
   height: 60x;
   margin: -30px auto 0;
   display: block;
   vertical-align:middle;
   text-align:center;
   position: absolute;
   top: 50%
}

.Archive {
  color: #990000;
}

.Testing {
  color: #33A1DE;
}

.DeletedLayer {
  text-decoration: line-through;
  color: #FF0000;
}

.NRDA, .Trustees, .Federal {
  color: #CD6600;
}

.navbar {
  font-size: 12px;
}

#footer1-container {
        display: flex;
}
.footer1_container > div {
        flex: 1;
}

.fullwidth {
  flex: 0 0 100%
}


.footer1-left {
        position: absolute;
        width: 365px;
        padding-left: 40px;
        left: 0;
        top: 0;
        height: 100%;
        text-align: left;
}
.footer1-right {
        position: absolute;
        text-align: right;
        top: 0;
        right: 0;
        width: 220px;
        margin-left: auto;
}

.noaalogo  {
        width: 10px;
}
#footer1 {
  position: absolute;
  bottom: 0;
  padding-top: 6px;
  left: 0;
  right: 0;
  color: black;
  font-size: 10px;
}


#footer1 > img {
  margin-left: 4px;
}

#footer1leftlinks {
  position: absolute;
  width: 325px;
  top: 0;
  left: 40px;
  top: 6px;
}
#footer1rightlinks {
  position: absolute;
  top: 6px;
  width: 220px;
  right: 4px;
  text-align: right;
}
#footer1right {
  float: right;
}
#footer1centerdisclaimers {
  float: left;
  width: 600px;
  top: 0;
/*
 *   left: 441px;
 *   */
  top: 6px;
  padding: 0px;
  margin: 0px;
}
#footer1centerdisclaimers ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}