body,html  {
  padding: 0px;
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  height: 100%;
}

/* on smaller screen the map should be above the data view */
  .navbar-container { width:100%; position: relative; }
  .map-container { height: 100%; width: 100%; position: relative; box-sizing: border-box; }
  .observation-container { width: 100%;position: relative; box-sizing: border-box; padding-top:20px; min-height: calc(100vh - 52px); }
  div.observation-list { position: absolute; }

@media only screen and (max-width: 1909px) and (min-width: 1023px) {
  .navbar-container { width:100%; z-index: 2; position: fixed; }
  .map-container { height: 100%; width: 40%; max-width: 768px; padding-top:52px; left:0px; z-index:1; position: fixed; box-sizing: border-box; border-right: 1px #dddddd solid;  }
  .observation-container { width: 60%; top:52px;  left:40%; right:0px; z-index:1; position: absolute; box-sizing: border-box; padding-top:0px; height: calc(100% - 52px);  }
  div.observation-list { position: fixed; }  
}

@media only screen and (min-width : 1910px) {
  .navbar-container { width:100%; z-index: 2; position: fixed; }
  .map-container { height: 100%; width: 768px; padding-top:52px; left:0px; z-index:1; position: fixed; box-sizing: border-box; border-right: 1px #dddddd solid;  }
  .observation-container { width: calc(100% - 768px) ; top:52px; left:768px; right:0px; z-index:1; position: absolute; box-sizing: border-box; padding-top:0px;  height: calc(100% - 52px); }
  div.observation-list { position: fixed; }
}



.navbar { margin-bottom: 0px;}

#observation-list li.active {
  color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

#observation-list li {
  cursor: pointer;
}


.ol-unselectable {
  background-color: transparent !important;
}

.ol-zoom-out { border-radius: 0px !important; }
.ol-zoom { padding-bottom: 0px !important;}

.layer-select {
  top: 48px;
  left: .5em;
  padding-top:0px !important;
  border-radius: 0px 0px 2px 2px !important;
}

.layer-select button {
  border-radius: 0px 0px 2px 2px !important;
  padding: 2px;
}
.ol-touch .layer-select {
        top: 80px;
      }



.map-tools {position: absolute; width: 100%;  bottom:0px; background-color:rgba(255,255,255,  0.95); display: none; border-top: 1px #bce8f1 solid;   }
.map-tools:before { filter: blur(20px);}

.map { height: 100%; padding: 0px; margin:0px; }
.map-tools input { margin-right :3px;}
.map-tools-container { padding-top:15px; padding-bottom:15px; }

.data { padding-top:20px;}


#selection-panel .btn {
   font-size: 12px;
}

.bold, .file-label  { 
  font-weight: bold !important;
}

.table-heading {
  border-top: 20px  transparent solid !important;
  vertical-align: text-bottom;
}

.tab-pane.active { padding: 20px; display: inherit; }
.tab-pane { display: none;}
.data-hidden { display: none !important;}

.data-label { width: 225px;  font-weight: bold;}

.file { padding:4px;}
.file-value { padding-bottom: 20px;}
.file-value img.data-file { width: 100%; }
.file-value img {border-width: 0px; width: 40px; margin-right:5px;}

.no-pad { padding-left:0px; padding-right: 0px;}
.no-pad-left , .no-pad-right { padding-left:0px; padding-right: 0px;}
@media only screen and (min-width : 768px) {
  .no-pad-left { padding-left:0px; padding-right: 10px; }
  .no-pad-right {  padding-left:10px; padding-right: 0px; }
}


.tab-panel {
  border: 1px solid #ddd;
  margin:0px 0px 20px 0px;
  padding:0px 0px 20px 0px;
  background-color: #fdfdfd;
  border-radius: 4px;
}

.tab-panel.first {
    border-radius: 0px 4px 4px 4px;
}

.nav-tabs { 
  border-bottom: 0px solid #ddd;
}
.nav-tabs .active a { 
    background-color: #fdfdfd !important;
}


.navbar-default {
   background-color: #d9edf7; border-color: #bce8f1; border-radius: 0px;
}

.navbar-brand { color: #31708f !important; }
.export { display: none;}
.dropdown.open .dropdown-toggle { background-color: #d9edf7 !important; }

.jump { cursor: pointer}

.all-fields h4 { color: #31708f; font-size: 16px; }


  .ol-scale-line-inner{
    color: black !important;
    padding: 5px;
    border-color:black !important;
  }

h3 { 
  margin-top:0px;
}

  /* Adding in 2.0 a list of observations */
div.observation-list {
  width: 199px;
  float: left;
  z-index: 1;
  border-right:1px solid #eeeeee;
  height: 100%;
}

div.observation-view {
  width: calc(100% - 200px);
  z-index :2;
  float: left;
  left:200px;
  position: absolute;
}

#location-message {
  font-style: italic;
  font-weight: bold;
}

#disclaimer-modal .modal-dialog {

  max-width: 600px;
}

#disclaimer-modal .modal-dialog p.text {
  font-size: 12px;
}