html,
body,
#mapview {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.tooltip {
    transform:none !important;
}

#accordionProfile .card {
  padding-left: 0px;
}


#accordionProfile .form-group {
    padding-top:10px;
}

.amppanel .tab-pane {
  padding: 10px;
}

@media screen and (max-width: 600px) {
  #leftPanelContainer {
    display: none;
  }
  #middlePanelContainer {
      width:100%;
  }

  #rightPanelContainer {
    display: none;
  }
}

.x-left-panel-scroll {
  height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
}

.esri-popup__main-container.esri-widget {
  width: 100% !important;
  /*width: 510px !important;*/
  /*max-height: 500px !important;*/
}

#app-loader-wrapper {
  background-color:white;
  z-index: 100000;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

#app-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -3rem;
  margin-left: -3rem;
}

#substationgraphs-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -3rem;
  margin-left: -3rem;
  display:none;
 
}

#waveformgraphs-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -3rem;
  margin-left: -3rem;
  display: none;
}

.waveform-item-header {
  color: blue;
  font-size:small;
  font-weight:bold;
  text-transform:uppercase;
}

.waveform-item {
  color: red;
  font-size: smaller;
}

#releasenotes-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -3rem;
  margin-left: -3rem;
  display: none;
}

#autosengraphs-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -3rem;
  margin-left: -3rem;
  display: none;
}

.autosen-item-header {
  color: blue;
  font-size: medium;
  font-weight: bold;
  text-transform: uppercase;
}

.autosen-item {
  color: red;
  font-size: small;
}

#app-alert {
  position: absolute;
  width: 100%;
  display: none;
}

#app-alert.show {
    position: absolute;
    width: 100%;
    display: block;
  }

.tab-content {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding: 0px;
}

.timeline-panel {
  height: calc(100vh - 100px);
  overflow-y:auto;
  overflow-x:hidden;
}

.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;

  /* Stop scrollbar showing when layer content is a little longer*/
  overflow-y: hidden;
}


.box {
    display: flex;
    flex-direction: column;    
}

.fill {
    flex: 1;
}

.header {
  /*height: 60px;*/
}

.footer {
    background-color:white;
    height: 60px;
}

/*
#amp-summary-datapanel {
  padding: 0;
  font-size: small;
  overflow: hidden;
}*/

#amp-summary-datapanel {
  padding: 0;
  font-size: small;
  max-height: 300px;
  overflow-y: scroll;
}

.list-group-item .form-check {
  text-overflow: clip;
  overflow: hidden;
  white-space: nowrap;
  text-transform: capitalize;
}

#amp-summary-datapanel .list-group-item {
  border: 0px;
}

#amp-summary-datapoweronpanel .list-group-item {
  border: 0px;
}
#amp-summary-datakelvatekpanel .list-group-item {
  border: 0px;
}
#amp-summary-dataautosenpanel .list-group-item {
  border: 0px;
}
#amp-summary-dataenergyippanel .list-group-item {
  border: 0px;
}
#amp-summary-datanodeslinespanel .list-group-item {
  border: 0px;
}
#amp-summary-datatracepanel .list-group-item {
  border: 0px;
}
#amp-summary-dataeneidapanel .list-group-item {
  border: 0px;
}

#timeline-messages-panel .nav.nav-pills {
    padding:10px;
}

.list-group-item-self {
  display: none;
  /*background-color:lightblue;*/
}

#amp-summary-datatracepanel {
  padding: 0;
  font-size: small;
}

#amp-summary-dataeneidapanel {
  padding: 0;
  font-size: small;
}

#amp-summary-datanodeslinespanel {
  padding: 0;
  font-size: small;
}

#amp-summary-datapoweronpanel {
  padding: 0;
  font-size: small;
}

#amp-summary-datakelvatekpanel {
  padding: 0;
  font-size: small;
  max-height: 300px;
  overflow-y: scroll;
}

#amp-summary-dataautosenpanel {
  padding: 0;
  font-size: small;
}

#amp-summary-dataenergyippanel {
  padding: 0;
  font-size: small;
}

/* Graph Styles */
#graph-legend {
    height:80vh;
    overflow-y:auto;
}

.tooltip {
  opacity: 0;
  background-color: white;
  border: solid;
  border-width: 2px;
  border-radius: 5px;
  padding: 5px;
}

.axis-label {
  fill: #000;
  font-size: 16px;
  /*text-anchor: middle;*/
}

.axis.voltage {
  /*fill: red;*/
}
.axis-label.voltage {
  /*stroke: red;*/
  font-weight: lighter;
}

.line.voltage {
  fill: none;
  /*stroke: red;*/
  stroke-width: 2;
}
.circle.voltage {
  stroke-width: 2;
}

.axis.current {
  /*fill: brown;*/
}
.axis-label.current {
  /*stroke: brown;*/
  font-weight: lighter;
}
.line.current {
  fill: none;
  /*stroke: black;*/
  stroke-width: 2;
}

.circle.current {
  /*fill: white;*/
  /*stroke: #22b3a2;*/
  stroke-width: 2;
}

.axis.activePower {
  /*fill: steelblue;*/
}

.axis-label.activePower {
  /*stroke: steelblue;*/
  font-weight: lighter;
}
.line.activePower {
  fill: none;
  /*stroke: steelblue;*/
  stroke-width: 2;
}
.circle.activePower {
  /*fill: white;
  stroke: #22b888;*/
  stroke-width: 2;
}

.axis.reactivePower {
  /*fill: green;*/
}

.axis-label.reactivePower {
  /*stroke: green;*/
  font-weight: lighter;
}
.line.reactivePower {
  fill: none;
  /*stroke: green;*/
  stroke-width: 2;
}

.circle.reactivePower {
  /*fill: white;*/
  /*stroke: #555888;*/
  stroke-width: 2;
}

/* Navi Voltage Charts */

.interactionchartcontainer {
    height:250px;
}

.axis-label {
    font-size: 12px;
}

.axis.distance_to_source {
  fill: grey;
}

.axis-label.distance_to_source {
  stroke: grey;
  font-weight: lighter;
}

.line.distance_to_source {
  fill: none;
  stroke: grey;
  stroke-width: 2;
}

.circle.distance_to_source {
  stroke-width: 2;
}

.axis.sm_max_voltage {
  fill: red;
}

.axis-label.sm_max_voltage {
  stroke: red;
  font-weight: lighter;
}


.circle.sm_max_voltage {
  fill: red;
  stroke: red;
  stroke-width: 2;
}

.axis.sm_min_voltage {
  fill: red;
}

.axis-label.sm_min_voltage {
  stroke: blue;
  font-weight: lighter;
}

.circle.sm_min_voltage {
  fill: blue;
  stroke: blue;
  stroke-width: 2;
}

/* Aggregated Styling */
.axis.sm_max_voltage_aggregated {
  fill: red;
}

.axis-label.sm_max_voltage_aggregated {
  stroke: red;
  font-weight: lighter;
}

.line.sm_max_voltage_aggregated {
  fill: none;
  stroke: red;
  stroke-width: 2;
}

.circle.sm_max_voltage_aggregated {
  fill: red;
  stroke: red;
  stroke-width: 2;
}

.axis.sm_min_voltage_aggregated {
  fill: blue;
}

.line.sm_min_voltage_aggregated {
  fill: none;
  stroke: blue;
  stroke-width: 2;
}

.axis-label.sm_min_voltage_aggregated {
  stroke: blue;
  font-weight: lighter;
}

.circle.sm_min_voltage_aggregated {
  fill: blue;
  stroke: blue;
  stroke-width: 2;
}

#axis-legend-voltage-aggregated {

}

/* Autosen Graphs */
.axis.temperature {
  /*fill: red;*/
}

.axis-label.temperature {
  /*stroke: red;*/
  font-weight: lighter;
}

.line.temperature {
  fill: none;
  /*stroke: red;*/
  stroke-width: 2;
}

.circle.temperature {
  stroke-width: 2;
}

.axis.humidity {
  /*fill: red;*/
}

.axis-label.humidity {
  /*stroke: red;*/
  font-weight: lighter;
}

.line.humidity {
  fill: none;
  /*stroke: red;*/
  stroke-width: 2;
}

.circle.humidity {
  stroke-width: 2;
}

/* Alarms */
.alarm {
  /*d-flex-x w-100 justify-content-between*/
  font-size: medium;
  cursor: pointer;
}
.alarm-header {
    text-decoration:underline;
}

.alarm-icon {
  width: 15px;
  height: 15px;
  margin-right:5px;
}

.alarm-title {
  font-size: medium;
}

.alarm-system {
    font-size:smaller;
}

.alarm-substation {
  font-size: smaller;
}
.alarm-time {
    color:gray;
    font-size:small;
}

/* Data Panel */
.datapanel {
}

.datapanel-icon {
  height: 10px;
  width: 10px;
  margin-right: 5px;
}

.datapanel-loader {
  height: 10px;
  width: 10px;
  margin-right: 5px;  
}


@media screen and (min-height:640px) and (max-height:769px) {

  #leftPanelContainer {
    zoom: 80%;
    -moz-transform: scale(80%);
    -moz-transform-origin: 0 0;
  }

  #rightPanelContainer {
    zoom: 80%;
    -moz-transform: scale(80%);
    -moz-transform-origin: 0 0;
  }

  #timeline-primary-panel {
    height: 768px;
  }

  #timeline-secondary-panel {
    height: 768px;
  }
}


@media screen and (max-height:641px) {

  #leftPanelContainer {
    zoom: 70%;
    -moz-transform: scale(70%);
    -moz-transform-origin: 0 0;
    font-size: smaller;
  }

  #rightPanelContainer {
    zoom: 70%;
    -moz-transform: scale(70%);
    -moz-transform-origin: 0 0;
    font-size: smaller;
  }


  #timeline-primary-panel {
    height: 600px;
  }

  #timeline-secondary-panel {
    height: 600px;
  }
}

#current-timeline {
    font-style:italic;
    font-size:small;
}

#lat-lon-info {
  position: absolute;
  bottom: 15px;
  color: #000;
  z-index: 50;
  margin: 5px;
}

.notifytip .tooltip-inner {
  background-color: darkred !important;
  color: #fff;
}

#timeline-messages i {
  color: #0d6efd;
}

#timeline-messages.notify i {
  color: darkred;
}

/* Messages */
.message {
  /*d-flex-x w-100 justify-content-between*/
  font-size: medium;
  cursor: pointer;
}

.message-header {
  text-decoration: underline;
}

.message-icon {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}

.message-title {
  font-size: small;
}

.message-time {
  color: gray;
  font-size: small;
}

#mapedit {
  background: #fff;
  /*                    position: absolute;*/
  top: 15px;
  right: 15px;
  padding: 10px;
}

#mapedit .action-button {
  font-size: 16px;
  background-color: transparent;
  border: 1px solid #D3D3D3;
  color: #6e6e6e;
  height: 32px;
  width: 32px;
  text-align: center;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

  #mapedit .action-button:hover,
  #mapedit .action-button:focus {
    background: #0079c1;
    color: #e4e4e4;
  }

#mapedit .active {
  background: #0079c1;
  color: #e4e4e4;
}

#amp-profiles a.dropdown-item {
  padding-left: 5px;
}