html, body {
  height: 100%;
  margin: 0;
  font: 15px Helvetica;
}

.tborder, .tborder td, .tborder th {
	border: 1px solid gray;
	border-collapse: collapse;
	padding-left:5px;
	padding-right:5px;
}

ul {
  margin:0;
  
}

#searchAndKey {
  display: none;
}

#announcement {
  background-color: red;
  color: white;
  padding-left:5px;
  padding-right:5px;
  padding-top: 3px;
  padding-bottom:3px;
  font-size: 18px;
  border-bottom:2px solid black;
  display:none;
}

#announcement p {
  margin:0px;
}
#announcement button {
  float:right;
  margin-left:3px;
}

#main {
  display:flex;
  flex-flow: column nowrap;
  height: 100%;
}

#header {
  display:flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0px 10px 10px 10px;
  height:70px;
  border-bottom:2px solid black;
  box-sizing: border-box;
  font: 30px Helvetica; 
  color:SlateGray; 
}

#header a:visited, #header a {
  color:SlateGray; 
}

#stats {
  margin:5px auto 5px auto;
  text-align:center;
  display:none;
}

#stats table{
	margin: 0 auto;
}

#addressSearchContainer {
  padding-bottom : 5px;
}

#lastUpdatedContainer {
  text-align:center;
  margin:5px;
}

#shSearch {
  float:left;
}

#plannedOutages {
  display:none;
}

#currentOutages {
  display:block;
}

#mapKey {
  padding-top:5px;
  text-align:center;
}

#mainpowerLogo {
  width: 187.5px;
  height: 50px;
  /*shift the image down a bit so that it appears to be on the same baseline as the text etc */
  margin-bottom:-9px;
}
#headerContactDetails {
  text-align:center;
}
#headerContactDetails a {
  text-decoration:none;  
}

#headerContactDetails a:hover {
  text-decoration:underline;  
}

#contactLinks {
  font-size: 15px;
}

#outageList{
  overflow-y: auto;
}

#powerOutages{
  padding-left: 20px;
}


#content {
  flex: 1;
  display:flex;
  overflow:auto;
}

#sidebar {
  display:flex;
  flex-direction: column;
  width:400px;
  padding:10px;
}


#listMapButtons {
  display:none;
}

#map {
  display:flex;
  flex: 1;
}

/* this overrides the jQuery display:block which happens when we use .show()
   required because in compact mode we want to show the map by default which means
   this element starts with display:none, rather than display:flex
 */
#currentPlannedButtons[style*='display: block']{
  display: flex !important;
}

svg {
  fill:#000000;
}

.mpred {
  background-color:rgb(240,78,99);
}

.mporange {
  background-color:rgb(243,112,33);
}

.mpblue{
  background-color:rgb(62,44,87);
}

/* override the default popup margins */
.leaflet-popup-content {
  margin: 5px 7px !important;
}

.text-box {
  border-radius:2px;
  height:30px;
  width:100%;
  border: 1px solid lightgray;
  /* another iPhone special */
  -webkit-appearance: none;
  font-size:16px !important;
}

.text-box::placeholder {
  color: slategray;
  opacity:1;
}

.popup-wrapper {
  position: relative;
}

.popup-wrapper .popup {
  visibility: hidden;  
  width: 250px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-top: 5px;
  margin-left: -125px;
  font-size: 13px;
}

.popup-wrapper:hover .popup {
  visibility: visible;
}

.popup-wrapper .popup::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}

.outage-image {
    height: 15px;
    width: 15px;
}

.hide {
  display:none !important;
}

.map-link{
    text-decoration:underline;
    display:none;

}

.job-button{

}

.map-list-button {
  
}

.button {
  border: 1px solid darkblue;
  border-radius: 2px;   
  height:30px;
  flex: 1;
  cursor:pointer;
}

.button.active {
  background-color: rgb(0,167,157);
}


.job {
  font: 12px Helvetica;
  width:100%;
}

.job-header {
  text-align:left;
  padding:7px;
  font: 15px Helvetica;
  width:100%;
  border-collapse: collapse;
  border: 1px solid lightgray;  
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.job-header.active {
  background-color: rgb(0,167,157);
}

.job-body {
  border: 1px solid lightgray;
  display:none;
}

#refresh-button:hover{
  cursor:pointer; 
}

.button-row {
  display:flex;
  flex: 0 0 auto;
  padding:0 0 10px 0;
}
.nc_list  {
  font-family: Helvetica;
}

#refresh-icon {
  vertical-align: bottom;
  padding-bottom: 1px;
}

.rotate-image {
  animation: rotation 2s linear infinite;
}

.status-Cancelled {
  text-decoration: line-through;
}

.legend-box {
  margin-bottom:-2px;
  height:15px;
  width:15px;
  display:inline-block;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


  
@media only screen and (max-width: 800px) {
  
  #header {
    height:48px;
  }

  #phoneNumber{
    display:none;
  }

  #outageList {
    display:none;
  }
  
  #currentPlannedButtons{
    display: none
  }

  #sidebar {
    width:100%;
    box-sizing: border-box;
    /* otherwise chrome scrolls buttons as well as the list */
    overflow-y:auto;
  }
  
  #powerOutages{
    font-size:20px;
    padding-left:5px;
  }
    
  #content {
    flex-direction:column;
  }
    
  #listMapButtons {
    display:flex;
  }
  
  #mainpowerLogo {
    width: 112.5px;
    height: 30px;
    margin-bottom:-5px;
  }  
  
  .map-link{
    display:inline;
  }

}

@media only screen and (max-width: 500px) {
    #powerOutages{
      display:none;
  }
}

/* addy styles - putting them here as fetching it from them causes a cookie warning in chrome */
ul.nc_list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: solid 1px #999;
  background: #ffffff;
  font-size: 15px;
  z-index: 1010;
}
ul.nc_list li.nc_item {
  cursor: pointer;
  padding: 5px 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-bottom: 1px solid #cccccc;
  text-transform: none !important;
}
ul.nc_list li.nc_item.nc_hover {
  background-color: #337ab7;
  color: white;
}
ul.nc_list li.nc_footer {
  font-size: 15px;
  color: #555;
  text-align: right;
  background: #eee;
  padding: 3px 5px;
  font-weight: bold;
}
li.nc_empty {
  padding: 5px 5px;
  border-bottom: 1px solid #cccccc;
}
.nc_highlight {
  font-weight: bold;
}