#viewDiv {
    padding: 0;
    margin: 0;
    height: 500px;
    width: 100%;
}

.bg-cardTitle {
    background-color: #6c757d;
    color: #ffffff;
    font-size: 1.2em;
    padding-bottom: 0.05em; 
    padding-top: 0.05em;
  }

.outageKPITitle{
  text-align: center;
}

.mapAlert{
  background-color: #C8122C;
  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;
  padding: 10px;
  text-align: center
}


.PowerOutageHeader{
  font-weight: 600;
}

.graphTitle {
    line-height: 1.5;
    padding-top: .375em;
    padding-bottom: .375em;
}

.graphOuter {
  position: relative;
}

.graphDiv {
  position: absolute;
}

.graphDivHidden {
  visibility: hidden;
}


.sublayers-item {
  background-color: #7FA1C4;
  color: #FFF;
  margin: 1px;
  padding: 10px;
  overflow: auto;
  text-align: center;
  cursor: pointer;
  /*font-size: 1.2vw;*/
  flex-basis: 50%;
  /*min-width: 50%;*/
  
}

.graphTimeSelectorHidden{
  visibility: hidden;
}

.mapsTitle {
    margin-top: .275em;
}

.footer {
    position: absolute;
    bottom: 0;
    height: 60px;
    width: 100%;
}


.footerText {
  font-size: .5em;
}


.sublayers, .chartchoice, .graphTimeChoice {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: center;
  align-items: stretch;
  overflow: auto;
}

.sublayers-item {
  background-color: #7FA1C4;
  color: #FFF;
  margin: 1px;
  padding: 10px;
  overflow: auto;
  text-align: center;
  cursor: pointer;
  /*font-size: 1.2vw;*/
  flex-basis: 50%;
  /*min-width: 50%;*/
  
}

.graphTimeChoice-item {
  background-color: rgba(0, 125, 255, .5);
  color: #FFF;
  margin: 1px;
  padding: 10px;
  overflow: auto;
  text-align: center;
  cursor: pointer;
  /*font-size: 1.2vw;*/
  flex-basis: 50%;
  /*min-width: 50%;*/
  
}


@media all and (min-width: 600px) {
div.sublayers-item{
    font-size: 1.2em;
  }
}

@media all and (max-width: 599px) and (min-width: 350px) {
div.sublayers-item{
    font-size: calc(1.2em - 1.2vw);
  }
}

@media all and (max-width: 350px) {
div.sublayers-item{
    font-size: 3.2vw;
  }
}

.chartchoice-item {
  background-color:#7FA1C4;
  color: #FFF;
  margin: 1px;
  padding: 10px;
  overflow: auto;
  text-align: center;
  cursor: pointer;
  font-size: 1.2em;
  flex-basis: 33.3%;
  /*min-width: 33.3%;*/

}

@media all and (min-width: 600px) {
div.chartchoice-item{
    font-size: 1.2em;
  }
}

@media all and (max-width: 599px) and (min-width: 350px) {
div.chartchoice-item{
    font-size: calc(1.2em - 1.2vw);
  }
}

@media all and (max-width: 350px) {
div.chartchoice-item{
    font-size: 3.2vw;
  }
}

.visible-layer, .visible-chart, .visible-time {
  color: #fff;
  background-color: #2B639E;
}
.esri-view-height-xsmall .esri-expand .esri-widget--panel, .esri-view-height-xsmall .esri-ui-corner .esri-component .esri-expand__content{
	max-height:360px;
  max-width: 160px;
}
.esri-legend__service-label{
	display:none;
}

.esri-legend__layer-cell--info {
    font-size: 11px;
}

.updateClass{
	font-size: 0.8em;
}
.list-group-item{
	padding: .4rem 1.25rem;
  background:  #c5ebc7;
}

.list-group-horiz {
    display: inline-block;
    padding-inline-start: 0px !important;
    padding:  0px !important;
}

/*ul.list-group-horiz:after {s
  clear: both;
  display: block;
  content: "";
}*/

.list-group-item-horiz {
    float: left;
    width: 5.5em;
    text-align: center;
    font-size: .95em;
    border-top-left-radius: 0rem !important; 
    border-top-right-radius: 0rem !important;
}

.map-Icon {
  background-image: url("images/map_off.png");
  background-repeat: no-repeat;
  background-size: cover;
  width:  1.5em; /*or your image's width*/
  height:  1.5em; /*or your image's height*/
  margin: 0;
  padding: 0;
  display: block;
  margin: auto;
}

.map-Icon:hover {
  background-image: url("images/map_on.png");
  background-repeat: no-repeat;
  background-size: cover;
  width:  1.5em; /*or your image's width*/
  height:  1.5em; /*or your image's height*/
  margin: 0;
  padding: 0;
  display: block;
  margin: auto;
}

.web-Icon {
  background-image: url("images/web_off.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 1.5em; /*or your image's width*/
  height: 1.5em; /*or your image's height*/
  margin: 0;
  padding: 0;
  display: block;
  margin: auto;
}

.web-Icon:hover {
  background-image: url("images/web_on.png");
  background-repeat: no-repeat;
  background-size: cover;
  width:  1.5em; /*or your image's width*/
  height:  1.5em; /*or your image's height*/
  margin: 0;
  padding: 0;
  display: block;
  margin: auto;
}

.providerTitle{
  font-size: .75em;
  text-align: center;
  width: 100%;
  height: 3em;
}