@charset "UTF-8";
/* CSS Document */


/* =========================================================
   GENERAL
   ========================================================= */

.color-legends {
  text-align: left;
}

@media (max-width: 768px) {
  .energysource {
    display: inline-block !important;
  }
}

@media (min-width: 768px) {
  .mobile-text {
    display: none;
  }
}


/* =========================================================
   LEGEND LIST ALIGNMENT
   ========================================================= */

.color-legends ul {
  list-style: none;
  padding-left: 0 !important;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
}

.color-legend {
  font-size: 1rem;

  display: flex !important;
  align-items: flex-start;

  width: 100%;

  margin: 0 0 10px 0 !important;
  padding: 0 !important;

  text-indent: 0 !important;
}

.color-legend span {
  display: block;
  flex: 1;
  line-height: 1.4;
}


/* =========================================================
   COLORED LEGEND CIRCLES
   ========================================================= */

.color-legend:not([class*="map-legend-icon-number-"])::before {
  content: "" !important;

  display: block !important;
  flex: 0 0 22px !important;

  width: 22px !important;
  height: 22px !important;

  min-width: 22px !important;
  min-height: 22px !important;

  margin: 0 10px 0 0 !important;
  padding: 0 !important;

  border-radius: 50% !important;
  box-sizing: border-box !important;

  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;

  vertical-align: middle !important;
  transform: none !important;
}


/* =========================================================
   LEGEND COLORS
   ========================================================= */

.color-db::before {
  background-color: #083D5D;
  border: 0.5px solid #083D5D;
}

.color-na::before {
  background-color: #02B9EC;
  border: 0.5px solid #02B9EC;
}

.color-no::before {
  background-color: #509242;
  border: 0.5px solid #509242;
}

.color-mi::before {
  background-color: #FBB315;
  border: 0.5px solid #FBB315;
}

.color-pa::before {
  background-color: #F16A23;
  border: 0.5px solid #F16A23;
}

.color-an::before {
  background-color: #007FB9;
  border: 0.5px solid #007FB9;
}

.color-al::before {
  background-color: #04592F;
  border: 0.5px solid #04592F;
}

.color-ho::before {
  background-color: #B02A25;
  border: 0.5px solid #B02A25;
}

.color-ni::before {
  background-color: #C8E03D;
  border: 0.5px solid #C8E03D;
}

.color-ma::before {
  background-color: #999999;
  border: 0.5px solid #999999;
}

.color-un::before {
  background-color: #EB2027;
  border: 0.5px solid #EB2027;
}

.color-mj::before {
  background-color: #000000;
  border: 0.5px solid #000000;
}


/* =========================================================
   NUMBERED STORAGE ICONS
   ========================================================= */

[class*="map-legend-icon-number-"]::before {
  content: "" !important;

  display: block !important;

  flex: 0 0 33px !important;

  width: 33px !important;
  height: 33px !important;

  min-width: 33px !important;
  min-height: 33px !important;

  margin: -5px 10px -5px 0 !important;
  padding: 0 !important;

  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 34px 34px !important;

  border: 0 !important;
  border-radius: 0 !important;

  transform: none !important;
}


/* =========================================================
   INDIVIDUAL NUMBERED ICONS
   ========================================================= */

.map-legend-icon-number-1::before {
  background-image: url("/content/dam/southern-co-gas/nicor-gas/images/icons/icon-number1.svg") !important;
}

.map-legend-icon-number-2::before {
  background-image: url("/content/dam/southern-co-gas/nicor-gas/images/icons/icon-number2.svg") !important;
}

.map-legend-icon-number-3::before {
  background-image: url("/content/dam/southern-co-gas/nicor-gas/images/icons/icon-number3.svg") !important;
}

.map-legend-icon-number-4::before {
  background-image: url("/content/dam/southern-co-gas/nicor-gas/images/icons/icon-number4.svg") !important;
}

.map-legend-icon-number-5::before {
  background-image: url("/content/dam/southern-co-gas/nicor-gas/images/icons/icon-number5.svg") !important;
}

.map-legend-icon-number-6::before {
  background-image: url("/content/dam/southern-co-gas/nicor-gas/images/icons/icon-number6.svg") !important;
}

.map-legend-icon-number-7::before {
  background-image: url("/content/dam/southern-co-gas/nicor-gas/images/icons/icon-number7.svg") !important;
}

.map-legend-icon-number-8::before {
  background-image: url("/content/dam/southern-co-gas/nicor-gas/images/icons/icon-number8.svg") !important;
}


/* =========================================================
   UNDERGROUND STORAGE DIAMOND ICON
   ========================================================= */

.color-storage::before {
  content: "" !important;

  display: block !important;

  flex: 0 0 22px !important;

  width: 22px !important;
  height: 22px !important;

  min-width: 22px !important;
  min-height: 22px !important;

  margin: 0 10px 0 0 !important;
  padding: 0 !important;

  background-image: url("/content/dam/southern-co-gas/nicor-gas/images/icons/icon-diamond-black.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;

  background-color: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  transform: none !important;
}


/* =========================================================
   LEGEND SECTION TITLES
   ========================================================= */

.regions-column .content-card--remove-height-padding p,
.storage-legend-column .content-card--remove-height-padding p,
.interstate-pipeline-legend .content-card--remove-height-padding p {
  margin: 0 0 14px 0 !important;
  padding: 0 !important;

  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}


/* =========================================================
   REGIONS COLUMN
   ========================================================= */

@media (min-width: 992px) {
  .regions-column .color-legends ul li {
    display: flex !important;
  }
}

.regions-column .color-legends ul li {
  margin-right: 0 !important;
}


/* =========================================================
   STORAGE LEGEND
   ========================================================= */


/*
   Move the entire storage facility list 2px left.

   Previous position was -8px.
   Changing to -2px moves BOTH the numbered icons
   and their descriptions 6px to the RIGHT.
*/

.storage-legend-column .color-legends ul {
  position: relative;
  left: -2px;
}


/*
   Keep each storage facility row aligned.
*/

.storage-legend-column [class*="map-legend-icon-number-"] {
  margin-left: 0 !important;
  padding-left: 0 !important;
}


/*
   All numbered icons.

   Maintain the existing icon-to-text spacing
   and icon positioning.
*/

.storage-legend-column [class*="map-legend-icon-number-"]::before {
  margin: -5px -4px -5px 0 !important;

  transform: translateX(-10px) !important;

  background-position: center !important;
}


/*
   Number 1 remains 2px farther right
   than numbers 2-8.
*/

.storage-legend-column .map-legend-icon-number-1::before {
  transform: translateX(-8px) !important;

  background-size: 38px 38px !important;
  background-position: center !important;
}


/*
   Troy Grove description remains 2px left
   relative to the other descriptions.
*/

.storage-legend-column .map-legend-icon-number-1 span {
  transform: translateX(-2px) !important;
}


/* =========================================================
   INTERSTATE PIPELINE LEGEND
   ========================================================= */

.interstate-pipeline-legend .color-legend {
  display: flex !important;
  align-items: flex-start !important;

  width: 100% !important;

  padding-left: 0 !important;
  text-indent: 0 !important;
}


/* =========================================================
   DISTRIBUTION MAP
   Tablet and mobile sizing
   ========================================================= */


/* Tablet */

@media (max-width: 991px) {

  .distribution-map-image img {
    display: block;

    width: 80% !important;
    max-width: 620px;

    height: auto !important;

    margin-left: auto;
    margin-right: auto;
  }
}


/* Mobile */

@media (max-width: 767px) {

  .distribution-map-image img {
    width: 88% !important;
    max-width: 430px;

    height: auto !important;

    margin-left: auto;
    margin-right: auto;
  }
}


/* =========================================================
   TABLET / MOBILE LEGEND STACKING
   ========================================================= */

@media (max-width: 991px) {

  .regions-column .color-legends ul,
  .storage-legend-column .color-legends ul,
  .interstate-pipeline-legend .color-legends ul {
    display: block !important;

    padding-left: 0 !important;
    margin-left: 0 !important;
  }


  .regions-column .color-legends ul li,
  .storage-legend-column .color-legends ul li,
  .interstate-pipeline-legend .color-legends ul li {
    display: flex !important;
    align-items: flex-start !important;

    float: none !important;

    width: 100% !important;

    margin-right: 0 !important;
    margin-bottom: 10px !important;
  }


  .regions-column .color-legend,
  .storage-legend-column .color-legend,
  .interstate-pipeline-legend .color-legend {
    width: 100% !important;

    margin-left: 0 !important;
    padding-left: 0 !important;

    text-indent: 0 !important;
  }
}