body {
    color: #4d4f53;
    font-family: 'Fira Sans',sans-serif;
    position: relative
}

.highcharts-container[style], .highcharts-root[style] {
    font-family: 'Fira Sans',sans-serif !important
}

a:link, a:visited {
    color: #235ba8
}

a:hover, a:active {
    color: #092852;
    text-decoration: none
}

@media(min-width: 1024px) {
    .inner-container {
        padding-left: 35px;
        padding-right: 35px
    }
}

.small-padding-mobile {
    padding-left: 12px;
    padding-right: 12px
}

.footer {
    padding-top: 30px;
    text-align: center
}

.footer-links p {
    font-size: .8rem
}

.footer-links ul {
    margin: 20px 0 30px
}

.footer-links li {
    display: block;
    list-style-type: none;
    padding: 10px 20px;
    font-weight: bold
}

.footer-links a:hover, .footer-links a:active {
    color: #092852;
    text-decoration: underline
}

@media(min-width: 769px) {
    .footer {
        padding-top: 18px;
        padding-bottom: 24px
    }

    .footer-links {
        text-align: right
    }

        .footer-links ul {
            margin: 0 0 30px
        }

        .footer-links li {
            display: inline;
            font-size: .8rem;
            padding: 0 0 0 20px
        }

    .logo-footer {
        text-align: left
    }
}

.hide {
    display: none !important
}

.invisible {
    visibility: hidden
}

.visually-hidden {
    position: absolute;
    left: -99999px
}

.overflow-hidden {
    overflow: hidden
}

.abs {
    position: absolute
}

.rel {
    position: relative
}

.static {
    position: static !important
}

.mt-12 {
    margin-top: 12px
}

.mb-60 {
    margin-bottom: 60px
}

.block {
    display: block !important
}

.inline-block {
    display: inline-block !important
}

.inline-table {
    display: inline-table
}

.table {
    display: table;
    table-layout: fixed
}

.table-cell {
    display: table-cell
}

caption {
    position: absolute;
    left: -9999rem
}

.table-careers th:first-child {
    width: 35%
}

.table thead {
    font-size: .75rem;
    background-color: #f1f1f1
}

    .table thead th {
        text-overflow: ellipsis;
        overflow: hidden
    }

.table.sortable th {
    cursor: pointer
}

    .table.sortable th:nth-child(1) {
        content: ''
    }

.table-careers tbody th {
    font-weight: normal
}

.table-careers .row {
    border: 1px solid #f1f1f1
}

.table-careers td:last-child {
    text-align: right
}

.table-careers [class^="col-"] {
    padding-top: 5px;
    padding-bottom: 5px
}

    .table-careers [class^="col-"]:first-child {
        background-color: #f1f1f1;
        font-weight: bold;
        padding-left: 5px;
        padding-right: 5px
    }

.table tbody, .table-careers [class^="col-"] {
    font-size: .875rem
}

table.sortable th {
    position: relative;
    padding: .4rem 1rem .4rem .5rem;
    vertical-align: top
}

    table.sortable th:after {
        position: absolute;
        right: .3rem;
        top: .55rem;
        content: "";
        color: #b6b6b6;
        font: normal normal normal 12px/1 FontAwesome
    }

table th.sorting-desc:after {
    content: "";
    color: #235ba8;
    top: .45rem
}

table th.sorting-asc:after {
    content: "";
    color: #235ba8;
    top: .65rem
}

.table th, .table td {
    padding: .5rem
}

.shadow2 {
    -webkit-box-shadow: 0 3px 6px 0 rgba(77,79,83,.16);
    -moz-box-shadow: 0 3px 6px 0 rgba(77,79,83,.16);
    box-shadow: 0 3px 6px 0 rgba(77,79,83,.16)
}

.color-red {
    color: #d0011b
}

.color-primary {
    color: #235ba8
}

.bg-red {
    background-color: #d0011b
}

.border-red {
    border: 1px solid #d0011b
}

.border-grey {
    border: 1px solid #f1f1f1
}

.bg-light-grey {
    background-color: #f1f1f1
}

.bg-blue {
    background-color: #235ba8;
    color: #fff
}

.bg-white {
    background-color: #fff
}

.block-white-dividers {
    border-bottom: 1px solid #f1f1f1;
    padding: 12px 0
}

    .block-white-dividers:last-child {
        border-bottom: 0
    }

.block-grey-dividers {
    background-color: #f1f1f1;
    border-bottom: 1px solid #fff;
    padding: 12px
}

    .block-grey-dividers [type=text] {
        min-height: 0
    }

#sign-up-agreement [type=text].disabled {
    background-color: transparent;
    border: 0;
    padding: 0
}

#sign-up-agreement .block-grey-dividers {
    padding: 6px 12px 0
}

#sign-up-agreement .disabled {
    background-color: #f1f1f1;
    border-style: none;
    padding: 0
}

.block-grey-dividers .title-h3 {
    margin: 0
}

.block-white-dividers, .block-grey-dividers {
    font-size: .875rem
}

    .block-grey-dividers.text-small {
        font-size: .75rem
    }

    .block-grey-dividers .fa-circle {
        font-size: 1.16rem;
        color: #fff;
        padding-right: .5rem;
        vertical-align: middle
    }

    .block-grey-dividers .fa-check-circle {
        font-size: 1.5rem;
        color: #43a047;
        padding-right: .3rem;
        vertical-align: middle
    }

.epp-plan-status .fa-check, .epp-plan-status .fa-check-circle, .epp-plan-status .fa-exclamation-triangle, .epp-plan-status .fa-octagon {
    font-size: 1.16rem;
    color: #43a047;
    padding-right: .3rem;
    vertical-align: middle
}

.epp-plan-status .red {
    color: red !important
}

.epp-plan-status .orange {
    color: #ffa500 !important
}

.epp-plan-status .green {
    color: #43a047 !important
}

@media(min-width: 576px) {
    .block-grey-dividers .long-line {
        text-align: right
    }
}

.section-block-tall {
    padding-top: 40px;
    padding-bottom: 40px
}

.section-block {
    padding-top: 25px;
    padding-bottom: 25px
}

.block-grey-rounded .card-block {
    border-radius: 12px;
    background-color: #f1f1f1;
    position: relative;
    height: 100%
}

    .block-grey-rounded .card-block:hover {
        background-color: #e5e5e5
    }

    .block-grey-rounded .card-block img {
        margin-right: 24px
    }

    .block-grey-rounded .card-block .circle {
        margin-bottom: 10px
    }

.icon-lightsout {
    background: url("/Assets/images/icons/lights-out.png") no-repeat 0 0;
    display: inline-block;
    height: 36px;
    width: 36px
}

@media(max-width: 767px) {
    .block-grey-rounded .col-md-6 {
        margin-bottom: 15px
    }
}

@media(max-width: 1023px) {
    .block-white-on-grey {
        margin-left: -15px;
        margin-right: -15px
    }

        .block-white-on-grey .bg-white {
        }

        .block-white-on-grey .row {
            margin-left: 0;
            margin-right: 0
        }
}

.card-block {
    font-size: .875rem;
    padding: 18px
}

.article-with-images .btn {
    white-space: normal !important
}

@media(min-width: 992px) {
    .article-with-images .table-cell > h3, .article-with-images .table-cell > p, .article-with-images .table-cell > a {
        margin-left: 12px
    }
}

@media(max-width: 320px) {
    .content-small {
        padding: 10px
    }

    .block-white-on-grey .card-block {
        display: table
    }

        .block-white-on-grey .card-block .btn {
            white-space: normal
        }
}

.card {
    border-radius: 0;
    border: 0
}

.card-block:hover .yellow-circle {
    background-color: #f9a825
}

.block-white-on-grey img {
    margin-left: 20px
}

.blue-section {
    padding-top: 30px;
    padding-bottom: 45px
}

@media(min-width: 992px) {
    .blue-section .card-block:last-child {
        padding-left: 45px
    }

    .blue-section .card-block:first-child {
        border-right: 1px solid #fff;
        padding-right: 45px
    }

    .blue-section .take-charge {
        margin-left: 20px
    }
}

@media(max-width: 991px) {
    .block-white-on-grey .column:first-child {
        margin-bottom: 15px
    }

    .blue-section {
        text-align: center;
        padding-top: 60px;
        padding-bottom: 60px
    }

        .blue-section .card-block {
            margin-right: 15px;
            margin-left: 15px
        }

            .blue-section .card-block:last-child {
                padding: 40px 0 0 0
            }

            .blue-section .card-block:first-child {
                border-bottom: 1px solid #b6b6b6;
                padding: 0 0 54px 0
            }

        .blue-section .btn {
            display: inline-block
        }

        .blue-section .take-charge {
            margin-bottom: 20px
        }
}

.content-socialmedia-links {
    margin-top: 16px
}

    .content-socialmedia-links .circle {
        margin: 0 12px 18px 0
    }

@media(min-width: 375px) {
    .content-socialmedia-links .circle {
        margin: 0 18px 18px 0
    }
}

.content-socialmedia-links .circle:last-child {
    margin-right: 0
}

.card-text, .card p {
    line-height: 1.71
}

h1, .hero-copy {
    font-family: 'Oswald',sans-serif;
    font-size: 2.25rem;
    text-transform: uppercase;
    line-height: 1.17;
    margin: 20px 0;
    font-weight: bold
}

.hero-copy {
    text-align: left;
    color: #fff;
    position: absolute;
    z-index: 15;
    margin: 0;
    bottom: 8px;
    left: 12px
}

header h1, header + h2, .breadcrumb + header h1, .breadcrumb + h1 {
    margin-top: 0
}

.carousel-caption-title, .carousel-caption h1 {
    font-size: 1.5em !important;
    font-weight: 300 !important;
    line-height: 1.25 !important;
    text-transform: none;
    margin: 20px 0 13px;
    font-family: 'Fira Sans',sans-serif
}

@media(min-width: 769px) {
    .carousel-caption-title, .carousel-caption h1 {
        font-size: 2.25rem !important;
        line-height: 1.17 !important
    }
}

h2, .section-title, .body-copy h2, .card-block h3, .outages-regions-widget h2, .partners-block h2, .partners-block h3, .partners-block h4, .partners-block h5, .partners-block h6 {
    font-size: 1.5rem;
    line-height: 1.25;
    margin-top: 24px;
    margin-bottom: 12px;
    font-weight: normal
}

.outages-regions-widget h2 {
    margin-top: 0;
    margin-bottom: 0;
    text-align: center
}

.card-block h3 {
    margin-top: 18px
}

.block-grey-rounded h2, .card-block h3 {
    color: #1c1d1f;
    font-weight: 100
}

.section-title {
}

h3, .title-h3, h2.title-h3, .body-intro, legend {
    font-size: 1.125rem;
    line-height: 1.67
}

.title-h4, h4 {
    font-size: 1rem !important;
    font-weight: bold !important;
    line-height: 1.5 !important
}

.career-block .title-h4, .content-block-with-link-icon .title-h4 {
    margin-top: 0;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5
}

p, .body-copy li:not(.nav-item), .column-layout li {
    font-size: .875rem;
    line-height: 1.71;
    margin-bottom: 3px
}

p {
    margin-bottom: 20px
}

.body-copy + h1 {
    margin-top: 0
}

.body-copy ol {
    margin-left: 0;
    padding: 0 0 0 20px
}

    .body-copy ol li {
        padding: 0 0 0 5px
    }

.body-copy ul:not(.steps-list):not(.breadcrumb):not(.nav) {
    list-style: none;
    margin-left: 0;
    padding: 0 0 0 20px
}

.body-copy li {
}

.body-copy ul:not(.account-icon-block):not(.steps-list):not(.breadcrumb):not(.local-menu) li:not(.nav-subitem):before {
    content: "•";
    color: #ffc72c;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    font-size: 1.5em
}

.primary-link, .primary-link:link, .primary-link:visited, .card-link, .ccard-block-link:link, .card-link:visited {
    font-size: .75rem;
    font-weight: bold;
    display: block;
    text-transform: uppercase;
    text-decoration: none
}

    .primary-link:hover, .primary-link:active, .card-link:hover, .card-link:active {
        color: #092852
    }

.column-layout {
    -moz-column-count: 2;
    -moz-columns: 2;
    -webkit-columns: 2;
    columns: 2;
    -moz-column-gap: 3em;
    -webkit-column-gap: 3em;
    column-gap: 3em;
    -moz-column-width: 50%;
    -webkit-column-width: 50%;
    column-width: 50%;
    margin: 0 0 30px 0;
    padding: 0;
    width: 100%;
    list-style: none
}

@media(min-width: 992px) {
    .column-layout {
        -moz-column-count: 3;
        -moz-columns: 3;
        -webkit-columns: 3;
        columns: 3;
        -moz-column-gap: 3em;
        -webkit-column-gap: 3em;
        column-gap: 3em;
        -moz-column-width: 33%;
        -webkit-column-width: 33%;
        column-width: 33%
    }
}

.column-layout li {
    display: block;
    line-height: 1.71
}

.partners-block {
    margin-top: 24px;
    padding-bottom: 34px
}

    .partners-block h2, .partners-block h3, .partners-block h4, .partners-block h5, .partners-block h6 {
        margin: 0 0 6px 0
    }

    .partners-block .side-image img {
        width: 100%;
        height: auto
    }

.btn-plain-border {
    margin-bottom: 15px
}

    .btn-plain-border:not(:last-child) {
        margin-right: 15px
    }

    .btn-plain-border:only-child {
        margin-left: 0
    }

.img-responsive-16by9 {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden
}

.bg-object-fit {
    background-size: cover;
    background-position: center center
}

    .bg-object-fit img {
        opacity: 0;
        position: absolute;
        top: 0
    }

@media(min-width: 992px) {
    .partners-block {
        margin-top: 24px;
        padding-bottom: 24px
    }

    .community {
        border-bottom: 1px solid #d8d8d8
    }

        .community:only-child, .community:last-child {
            border-bottom: 0
        }
}

.limit-editor-image-size {
    max-width: 100%;
    height: auto
}

.circle {
    width: 36px;
    height: 36px;
    line-height: 36px;
    -moz-border-radius: 36px;
    -webkit-border-radius: 36px;
    border-radius: 36px;
    text-align: center
}

    .circle .fa {
        line-height: 36px
    }

.yellow-circle {
    background-color: #ffc72c;
    color: #fff
}

    .yellow-circle:hover, .yellow-circle:focus {
        background-color: #f9a825
    }

.fa.yellow {
    color: #ffc72c !important
}

.white-circle, .white-circle:link, .white-circle:visited {
    background-color: #fff;
    color: #092852;
    font-size: 1.125rem;
    display: inline-block
}

    .white-circle:hover, .white-circle:focus {
        background-color: #092852;
        color: #fff
    }

    .white-circle .fa svg path, .white-circle:link .fa svg path, .white-circle:visited .fa svg path {
        fill: #092852
    }

    .white-circle:hover .fa svg path {
        fill: #fff
    }

.blue-circle, .blue-circle:link, .blue-circle:visited {
    background-color: #235ba8;
    color: #fff;
    font-size: 1.125rem;
    display: inline-block
}

    .blue-circle:hover, .blue-circle:focus {
        background-color: #092582 !important;
        color: #fff
    }

.btn {
    display: inline-block;
    font-weight: bold;
    line-height: 1.25;
    text-align: center;
    border: 2px solid transparent;
    padding: .38rem 1.3rem;
    border-radius: 16px;
    font-size: .75rem;
    text-transform: uppercase;
    cursor: pointer
}

.user-block-grey .btn-primary {
    padding: .2rem 1.3rem
}

.outages-regions-widget .btn-primary {
    max-width: 300px
}

.btn-primary, .btn-primary:link, .btn-primary:visited {
    background-color: #235ba8;
    color: #fff !important
}

    .btn-primary:focus, .btn-primary.focus, .btn-primary:hover {
        -webkit-box-shadow: none;
        box-shadow: none;
        border-color: transparent
    }

    .btn-primary[disabled], .btn-primary.disabled, .btn-primary:disabled, .btn-primary[disabled]:focus, .btn-primary[disabled].focus, .btn-primary[disabled]:hover {
        background-color: #878787;
        border-color: #878787
    }

.btn-primary-dark {
    background-color: #092852;
    color: #fff
}

.btn-plain {
    color: #235ba8;
    background-color: #fff
}

.btn-text-only {
    color: #235ba8;
    background-color: #fff;
    text-transform: none;
    padding: 0;
    border-radius: 0
}

.btn-account-go {
    padding: .3rem 0;
    font-weight: bold;
    color: #235ba8;
    background-color: transparent;
    text-transform: none
}

.btn-plain-border {
    background-color: #fff;
    border: 2px solid #235ba8;
    color: #235ba8
}

    .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-plain:hover, .btn-plain:active, .btn-plain:focus, .btn-plain-border:hover, .btn-plain-border:active, .btn-plain-border:focus {
        color: #fff;
        background-color: #092852
    }

    .btn-plain-border:hover, .btn-plain-border:active, .btn-plain-border:focus {
        border: 2px solid #092852
    }

.btn-large {
    padding: .8rem 1.3rem;
    border-radius: 24px
}

.btn-tertiary, .rounded-button-white, .download-button, .input-file-container {
    border-radius: 12px;
    background-color: #fff;
    padding: 12px;
    display: block;
    margin-bottom: 15px;
    text-align: left;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

    .btn-tertiary.grey {
        background-color: #f1f1f1
    }

    .btn-tertiary .circle {
        display: inline-block
    }

.rounded-button-white, .download-button, .input-file-container {
    border: solid 1px #f1f1f1
}

.download-button, .input-file-container {
    -webkit-box-shadow: 0 3px 6px 0 rgba(77,79,83,.16);
    -moz-box-shadow: 0 3px 6px 0 rgba(77,79,83,.16);
    box-shadow: 0 3px 6px 0 rgba(77,79,83,.16)
}

.rounded-button-white-link, .download-button-link {
    padding-left: 7px;
    font-size: .875rem;
    line-height: 1.29;
    text-decoration: none;
    vertical-align: middle
}

.btn-tertiary-link {
    text-transform: uppercase;
    font-size: .75rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .6px;
    text-decoration: none;
    vertical-align: middle;
    padding-left: 7px;
    padding-right: 7px;
    display: inline-block
}

.btn-tertiary.stacked {
    text-align: center
}

    .btn-tertiary.stacked .circle {
        margin: 0 auto 10px auto
    }

    .btn-tertiary.stacked .btn-tertiary-link {
        display: block
    }

.btn-tertiary:hover, .rounded-button-white:hover, .download-button:hover, .btn-tertiary:focus, .rounded-button-white:focus, .download-button:focus, .input-file-container:hover {
    background-color: #e5e5e5;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-decoration: none
}

.rounded-button-white:hover, .download-button:hover, .rounded-button-white:focus, .download-button:focus, .input-file-container:hover {
    border: solid 1px #e5e5e5
}

.btn-tertiary:focus, .rounded-button-white:focus, .download-button:focus, .input-file-container:focus {
    outline: 0
}

    .btn-tertiary:hover .yellow-circle, .rounded-button-white:hover .yellow-circle, .download-button:hover .yellow-circle, .btn-tertiary:focus .yellow-circle, .rounded-button-white:focus .yellow-circle, .download-button:focus .yellow-circle {
        background-color: #f9a825
    }

.btn-quaternary, .link-quaternary {
    font-size: .75rem;
    font-weight: bold;
    line-height: 2;
    color: #235ba8;
    display: inline-block;
    padding: 10px 15px
}

.btn-quaternary {
    padding: 10px 15px
}

    .btn-quaternary.blue {
        color: #fff;
        background-color: #235ba8
    }

    .btn-quaternary .fa, .link-quaternary .fa, .content-block-with-link-icon .fa, .career-block .fa {
        font-size: .94rem;
        line-height: 2;
        color: #ffc72c
    }

    .btn-quaternary:hover, .btn-quaternary:focus, .link-quaternary:hover, .link-quaternary:focus {
        text-decoration: none
    }

    .btn-quaternary.blue:hover, .btn-quaternary.blue:focus {
        color: #fff
    }

.hero-image .img-fluid, .hero-full-width img {
    width: 100%
}

.top-tab {
    background-color: #235ba8;
    color: #fff;
    font-size: .75em;
    font-weight: bold;
    min-height: 28px;
    text-align: right;
    position: absolute;
    right: 0;
    min-width: 220px;
    border-bottom-left-radius: 10px;
    z-index: 20
}

.top-tab {
    background: url("/Assets/images/curve.png") no-repeat 0 0
}

    .top-tab div {
        background-color: #235ba8;
        padding: 0 43px 0 25px;
        margin-left: 49px;
        min-height: 28px
    }

    .top-tab .fa {
        color: #ffc72c;
        padding-right: 7px
    }

a.top-link:link, a.top-link:visited {
    color: #fff;
    text-decoration: none;
    min-width: 10px;
    display: inline-block;
    padding-top: 3px
}

a.top-link:hover, a.top-link:focus, a.top-link:active {
    text-decoration: underline
}

.top-link-contact {
    margin-left: 20px
}

.carousel-item {
    height: 418px;
    transition: transform .2s ease-in-out,-webkit-transform .2s ease-in-out,-o-transform .2s ease-in-out
}

    .carousel-item > img {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%
    }

.image-fit, .image-fit-local {
    background-size: cover;
    background-position: 0 center
}

.image-fit-local, .hero-full-width {
    width: 100%;
    overflow: hidden;
    height: 234px
}

.image-fit > img {
    opacity: 0
}

.image-fit-local > img {
    width: 100%;
    height: auto;
    min-height: 234px
}

@media(max-width: 767px) {
    .image-fit-local, .hero-full-width {
        height: 175px
    }

        .image-fit-local > img {
            min-height: 175px
        }

        .image-fit-local img[src*="mobile"] {
            position: absolute;
            left: 50%;
            top: 0;
            height: 100%;
            width: auto;
            -webkit-transform: translate(-50%,0);
            -ms-transform: translate(-50%,0);
            transform: translate(-50%,0)
        }

        .image-fit-local img[src*="desktop"] {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 100%;
            width: auto;
            -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%)
        }
}

.gradient-bg:after, .image-fit-local:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: -moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 100%);
    background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 100%);
    background: -o-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 100%);
    background: -ms-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 100%);
    background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 100%);
    opacity: .6;
    z-index: 1
}

@media(min-width: 769px) {
    .carousel-item {
        height: 486px
    }
}

.carousel-indicators {
    bottom: 60px
}

.carousel-caption {
    bottom: 104px;
    right: 5%;
    left: 5%;
    z-index: 10;
    padding-top: 0;
    padding-bottom: 0
}

@media(min-width: 992px) {
    .carousel-caption {
        left: calc((100% - 990px)/2);
        width: 685px
    }

    .carousel-indicators {
        bottom: 0
    }

    .carousel-caption {
        bottom: 30px;
        text-align: left
    }
}

.carousel-control-prev, .carousel-control-next {
    width: 42px
}

.hero-banner, .hero-image {
    position: relative;
    margin-bottom: 24px
}

.hero-banner {
}

@media(max-width: 767px) {
    .img-adjust-width {
        margin-right: -15px;
        margin-left: -15px
    }
}

.hero-image img {
    position: relative;
    z-index: -1;
    display: block
}

.position-helper {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 20
}

@media(max-width: 575px) {
    .hero-banner .container {
        width: 100%
    }
}

@media(max-width: 1023px) {
}

.hero-banner .outages-regions-widget {
    position: absolute;
    right: 0;
    top: 20px
}

.hero-banner .login-widget {
    position: absolute;
    right: calc((100% - 990px)/2);
    bottom: 20px
}

.login-widget .rounded-button-white-link {
    font-size: .75rem;
    font-weight: bold
}

.login-widget .rounded-button-white:hover, .login-widget .rounded-button-white:focus {
    background-color: #fff
}

@media(min-width: 768px) {
    .hero-banner .outages-regions-widget, .hero-banner .login-widget, .login-widget-collapsed-inner {
        margin: 0 auto
    }

    .hero-banner .login-widget, .login-widget-collapsed-inner {
        width: 50%
    }
}

@media(max-width: 991px) {
    .login-widget-collapsed-inner {
        min-height: 60px
    }

    .hero-banner .login-widget.open-login {
        max-height: 500px
    }

    .hero-banner .outages-regions-widget, .hero-banner .login-widget {
        position: static;
        background-color: rgba(241,241,241,1)
    }

    .hero-banner .login-widget {
        overflow: hidden;
        border-radius: 0;
        background-color: rgba(241,241,241,1);
        -webkit-transition: max-height .8s;
        -moz-transition: max-height .8s;
        -o-transition: max-height .8s;
        transition: max-height .8s;
        max-height: 0
    }

    .position-helper {
        position: static
    }

    .login-widget-collapsed-open-button {
        position: relative;
        font-size: 2.5rem;
        font-weight: 200
    }

        .login-widget-collapsed-open-button:after {
            content: '+';
            position: relative;
            top: 50%;
            margin-top: -24px
        }

    .login-widget-collapsed-inner.open-login .login-widget-collapsed-open-button:after {
        content: '-'
    }

    .login-widget-collapsed-inner.open-login {
    }

    .login-widget-cta .btn {
        padding: .8rem 3.3rem
    }

    .login-widget-guest .custom-control {
        padding-left: 2rem
    }
}

@media(min-width: 992px) {
    .login-widget-collapsed-inner {
        display: none
    }

    .hero-banner .outages-regions-widget, .hero-banner .login-widget {
        display: block
    }

    .hero-banner .login-widget {
        width: 300px
    }

    .hero-banner .outages-regions-widget {
        min-width: 380px
    }
}

.breadcrumb {
    font-size: .9rem;
    line-height: 1.64;
    background: transparent;
    margin-bottom: 0;
    padding: .75rem 1rem .75rem 0
}

.body-copy > .breadcrumb {
    padding-top: 0
}

.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: .5rem;
    padding-left: .5rem;
    color: #ffc72c;
    content: "";
    font: normal normal normal 10px/1 FontAwesome
}

.login-widget > div, .outages-regions-widget, .login-form {
    border-radius: 12px;
    background-color: rgba(241,241,241,.95);
    padding: 20px;
    font-size: .94rem;
    color: #1c1d1e
}

    .login-widget > div .login-form {
        border: solid 1px #f1f1f1
    }

.login-widget {
    min-width: 300px;
    box-shadow: 0 6px 12px 0 rgba(77,79,83,.16)
}

    .login-widget .form-group {
        margin-bottom: .785rem
    }

    .login-widget h2, .login-form h2 {
        font-size: 1.2rem;
        line-height: 1.67;
        text-align: center;
        font-weight: normal;
        margin: 8px 0 15px
    }

        .login-widget h2 span, .login-form h2 span {
            display: block;
            font-size: .75rem
        }

.forgot-link:link, forgot-link:visited {
    font-size: .75rem;
    font-weight: bold;
    line-height: 2;
    text-align: right;
    color: #235ba8;
    display: inline-block
}

.forgot-link:first-child {
    margin-right: 7px
}

.forgot-link:hover, .forgot-link:active {
    text-decoration: none
}

.login-widget input, .mdi input {
    padding-right: 30px !important
}

.mdi {
    position: relative
}

.zmdi-account:before {
    font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    right: 12px;
    bottom: 12px;
    color: #4d4f53
}

#revealPassword {
    position: absolute;
    border: 0;
    background: transparent;
    right: 2px;
    bottom: 9px;
    color: #4d4f53
}

.login-widget-rounded-button {
    background-color: #fff
}

.login-widget-outer {
    position: absolute;
    bottom: 0;
    z-index: 20
}

.login-widget-collapsed-inner {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background-color: #235ba8;
    color: #fff;
    overflow: hidden;
    font-size: 1.1rem;
    min-width: 300px
}

    .login-widget-collapsed-inner .circle {
        margin-right: 10px
    }

.login-widget-guest .login-widget-cta, .login-form .login-widget-cta {
    padding-top: 40px
}

.forgot-links-block {
    position: absolute;
    top: 7px;
    right: 0
}

.login-widget-cta .btn {
    margin: 20px auto 8px
}

.login-widget-cta .primary-link {
    margin-top: 10px
}

.login-widget-collapsed-open-button {
    min-height: 60px;
    width: 60px;
    background-color: rgba(9,40,82,.5);
    color: #fff;
    text-align: center;
    float: right
}

@media(max-width: 374px) {
    .login-widget-collapsed-open-button {
        width: 40px
    }

    .login-widget, .login-widget-collapsed-inner {
        min-width: 280px
    }
}

@media only screen and (min-device-width: 320px) and (max-device-width:568px) {
    .carousel-caption a {
        margin-bottom: 92px
    }

    .carousel-inner {
        position: relative;
        width: 100%;
        overflow: hidden;
        height: 300px
    }

    .carousel-caption-title, .carousel-caption h1 {
        font-size: 1.5em !important;
        font-weight: 300 !important;
        line-height: 1.25 !important;
        text-transform: none;
        margin: 20px 0 32px;
        font-family: 'Fira Sans',sans-serif
    }
}

.login-widget-collapsed-open-title {
    float: left;
    padding: 10px
}

.search-widget {
    width: 100%;
    border: solid 1px #b6b6b6;
    border-radius: 18px;
    background-color: #fff
}

    .search-widget.focus {
        border: solid 1px #235ba8
    }

    .search-widget input[type="text"] {
        width: 80%;
        display: inline-block;
        min-height: 40px;
        padding: 9px 20px;
        border: transparent;
        font-size: .9rem;
        color: #4d4f53;
        background: transparent
    }

        .search-widget input[type="text"]:focus, .search-widget-button:focus {
            background-color: transparent;
            outline: 0;
            outline-offset: 0;
            outline-style: none;
            box-shadow: none;
            border-color: transparent;
            border: 0
        }

            .search-widget-button:focus i {
                outline: 1px dotted #000;
                outline-color: #4d90fe;
                outline-offset: -2px;
                outline: -webkit-focus-ring-color auto 5px
            }

        .search-widget input[type="text"]:-moz-focusring, .search-widget-button:-moz-focusring {
            outline: 0
        }

            .search-widget-button:-moz-focusring i {
                outline: 1px dotted #000;
                outline-color: #4d90fe;
                outline-offset: -2px;
                outline: -webkit-focus-ring-color auto 5px
            }

.search-widget-button {
    background: transparent;
    width: 20%;
    max-width: 60px;
    padding: 0;
    border: transparent;
    font-size: .9rem;
    color: #235ba8;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0
}

    .search-widget-button .fa {
        font-size: 1.125rem
    }

.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-color: #fff;
    border-top: 6px solid #235ba8;
    z-index: 50
}

    .search-overlay .inner-container {
        padding-left: 32px;
        padding-right: 32px
    }

.search-results-list {
    margin: 0;
    padding: 0
}

    .search-results-list li {
        list-style: none
    }

        .search-results-list li a {
            display: block;
            padding: 10px 0 10px
        }

.link-text {
    font-size: .75rem;
    margin-bottom: 5px
}

.tagline {
    font-family: 'Oswald',sans-serif;
    font-size: 1.12rem;
    text-transform: uppercase;
    line-height: 1.5rem;
    text-align: center;
    color: #b6b6b6;
    margin: 24px 0
}

    .tagline span {
        color: #ffc72c
    }

.top-section {
    padding: 21px 0 0
}

@media(min-width: 769px) {
    .top-section {
        padding: 1.7rem 15px 13px 15px
    }
}

.current-outages a {
    background: url("/Assets/images/icons/icon-outages.png") no-repeat 0 0;
    min-height: 36px;
    padding-left: 45px
}

    .current-outages a, .current-outages a:link, .current-outages a:visited {
        font-size: .75rem;
        font-weight: bold;
        display: inline-block;
        text-transform: uppercase;
        text-decoration: none;
        line-height: 36px
    }

@media(min-width: 769px) {
    .top-sectiont {
        border-bottom: 1px solid #f1f1f1;
        padding: 27px 0 20px
    }
}

@media(max-width: 768px) {
    .current-outages a {
        margin-top: 8px;
        margin-bottom: 8px
    }

    .logo-header {
        padding-bottom: 15px
    }

    .current-outages {
        border-bottom: 1px solid #f1f1f1;
        border-top: 1px solid #f1f1f1
    }
}

@media(min-width: 768px) {
    .logo-footer-mobile {
        display: none !important
    }
}

@media(max-width: 767px) {
    .logo-footer-desktop {
        display: none !important
    }
}

@media only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio: 2/1),only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2) {
    .logo-header a {
        background: url(/Assets/images/logos/blue@2x.png) no-repeat;
        background-size: 198px 66px;
        width: 198px;
        height: 66px;
        display: inline-block
    }

    .logo-header img {
        display: none
    }

    .logo-footer-desktop, .logo-footer-mobile {
        display: none !important
    }

    .logo-footer {
        background: url(/Assets/images/logos/logo-colour-horizontal-transparent@2x.png) no-repeat center;
        background-size: 372px 48px;
        height: 48px;
        display: block
    }

    @media(max-width: 767px) {
        .logo-footer {
            background: url(/Assets/images/logos/logo-colour-stacked-transparent@2x.png) no-repeat center;
            background-size: 189px 109px;
            height: 109px;
            display: block
        }
    }
}

.top-border {
    border-bottom: 6px solid #235ba8
}

.notification-block .fa {
    margin-right: .5em
}

.notification-block, .notification-block a, .notification-block a:hover {
    color: #fff;
    font-size: .875rem;
    text-decoration: none
}

.info-block-blue, .info-block-blue a, .info-block-blue a:hover, .info-block-orange, .info-block-orange a, .info-block-orange a:hover, .info-block-green, .info-block-green a, .info-block-green a:hover, .info-block-red, .info-block-red a, .info-block-red a:hover {
    color: #fff;
    text-decoration: none
}

    .info-block-blue .notification-type {
        color: #ffc72c;
        font-weight: bold
    }

    .info-block-blue .fa {
        color: #ffc72c
    }

.info-block-blue {
    background-color: #092852
}

.info-block-green {
    background-color: #43a047
}

.info-block-yellow {
    background-color: #ffc72c;
    line-height: 1.29
}

.info-block-orange {
    background-color: #e65100;
    line-height: 1.29
}

.info-block-red {
    background-color: #d0021b;
    line-height: 1.29
}

    .info-block-yellow p, .info-block-red p {
        line-height: 1.29;
        font-size: .875rem
    }

        .info-block-yellow p:first-child:last-child, .info-block-red p:first-child:last-child, .info-block-green p:first-child:last-child, .info-block-yellow p:last-child, .info-block-red p:last-child, .info-block-green p:last-child {
            margin-bottom: 0
        }

.info-block-yellow strong {
    color: #235ba8
}

.notification-type {
    text-transform: uppercase
}

.notification-text {
    padding-right: .3em
}

.top-article {
    line-height: 1.71
}

.last-update-block {
    margin-top: 24px
}

h1 + .last-update-block, header + .last-update-block {
    margin-top: 36px
}

.top-article h1, .last-update-block h1 {
    font-size: 2.25rem;
    font-weight: 300;
    line-height: 1.11;
    text-align: left;
    color: #1c1d1f;
    margin: 5px 0 15px;
    font-family: 'Fira Sans',sans-serif;
    text-transform: none
}

.top-article .last-update-date {
    font-size: .875rem
}

.top-article .last-update {
    font-size: 1rem
}

.outages-regions-widget {
    padding: 20px 10px
}

    .outages-regions-widget .region-map ul {
        padding: 0;
        margin: 20px auto;
        display: flex;
        flex-wrap: wrap
    }

    .outages-regions-widget .region-map li {
        list-style: none;
        width: 50%;
        text-align: center;
        padding-bottom: 1px;
        padding-right: 1px;
        display: flex
    }

.region-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    width: 100%;
    padding: 10px 15px;
    font-size: .75rem;
    text-transform: uppercase;
    font-weight: bold
}

    .region-content a, .region-content {
        color: #235ba8
    }

.outages-regions-widget .region-map img {
    max-width: 72px;
    margin: 0 auto 15px
}

@media(min-width: 768px) and (max-width:991px) {
    .outages-regions-widget .region-map li {
        width: 25%
    }
}

@media(min-width: 992px) {
    .hero-full-width .outages-regions-widget {
        position: absolute;
        right: 30px;
        top: 30px;
        z-index: 10;
        width: 41.666667%;
        max-width: 380px;
        margin-top: 0
    }

    .outages-regions-widget .region-map ul {
        max-width: 330px;
        max-height: 450px;
        overflow-y: auto
    }

    .outages-regions-widget .region-map li {
        width: 33%
    }
}

.twitter-block {
}

@media(min-width: 768px) {
    .twitter-block iframe[style] {
        height: -o-calc(100% - 50px) !important;
        height: -webkit-calc(100% - 50px) !important;
        height: -moz-calc(100% - 50px) !important;
        height: calc(100% - 50px) !important
    }
}

.twitter-block .user-card-text a, .pol-group a {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word
}

.pol-group .card {
    background-color: transparent;
    border: 0
}

@media(min-width: 769px) {
    .pol-group .card:not(:first-child) {
        padding-left: 12px
    }
}

.pol-group .card-block {
    background-color: #fff;
    font-size: .9rem;
    line-height: 1.29;
    padding: 12px 12px 0 12px
}

.pol-group .card-title {
    font-size: .75rem;
    font-weight: bold
}

.pol-group .card-footer {
    background-color: #fff;
    border: 0;
    padding: 6px 12px;
    color: #b6b6b6;
    font-family: Arial
}

.accordion-controls, .accordion-controls-outages .controls {
    font-size: .75rem;
    margin-bottom: 24px;
    margin-top: 20px
}

.accordion-controls-outages {
    margin-bottom: 12px
}

    .accordion-controls-outages .btn, .accordion-controls-outages .view-label {
        text-transform: uppercase
    }

    .accordion-controls-outages .view-label {
        font-size: .875rem;
        padding-right: 10px
    }

@media(min-width: 992px) {
    .accordion-controls, .accordion-controls-outages .controls {
        margin-top: 0;
        text-align: right
    }

    .accordion-controls, .accordion-controls-outages {
        margin-bottom: 15px
    }

        .accordion-controls-outages .controls {
            margin-bottom: 0
        }
}

.accordion-controls a, .accordion-controls-outages a {
    display: inline-block;
    margin-left: 15px
}

.accordion-controls .fa, .accordion-controls-outages .fa {
    width: 15px;
    height: 15px;
    line-height: 16px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    text-align: center;
    margin-right: 7px
}

.panel .card {
    border-radius: 12px;
    border: 0;
    background: transparent;
    -webkit-box-shadow: 0 3px 6px 0 rgba(77,79,83,.16);
    -moz-box-shadow: 0 3px 6px 0 rgba(77,79,83,.16);
    box-shadow: 0 3px 6px 0 rgba(77,79,83,.16)
}

.panel .card-header p {
    font-size: .875rem;
    margin-bottom: 0
}

.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: 0
}

.panel .card-header-text {
    margin-top: 0;
    padding-right: 40px;
    font-size: 1.125rem !important;
    line-height: 1.33 !important;
    color: #235ba8;
    position: relative;
    font-weight: 300
}

.panel .map-container {
    height: 570px
}

@media(max-width: 767px) {
    .panel .map-container {
        height: 300px
    }
}

.card-header-text a[aria-expanded=false]:after, .card-header-text a[aria-expanded=true]:after {
    right: 5px;
    top: 50%;
    display: inline-block;
    font-size: 1.6rem;
    line-height: 1em;
    position: absolute;
    margin-top: -12px
}

.card-header-text a[aria-expanded=false]:after {
    content: "+"
}

.card-header-text a[aria-expanded=true]:after {
    content: "-"
}

.card-header a:hover, .card-header a:focus {
    text-decoration: none
}

.card-header-right {
    float: right;
    padding-right: 20px
}

.card-subheader-text {
    font-size: 1rem;
    line-height: 1.33;
    font-weight: bold;
    margin-bottom: 15px
}

@media(min-width: 576px) {
    .card-header-account-number {
        float: right;
        padding-right: 20px
    }
}

.account-icon-block {
    margin: 0;
    padding: 0 !important;
    width: 100%
}

    .account-icon-block li {
        list-style: none;
        display: inline-table;
        text-align: center;
        padding: 10px;
        margin: 5px;
        font-size: .75rem;
        line-height: 1.5;
        max-width: 80px
    }

    .account-icon-block .circle {
        display: block;
        margin: 0 auto 10px
    }

    .account-icon-block a:link, .account-icon-block a:visited {
        display: block;
        color: #4d4f53
    }

    .account-icon-block a:hover, .account-icon-block a:focus, .account-icon-block a:active {
        display: block
    }

        .account-icon-block a:hover .blue-circle, .account-icon-block a:focus .blue-circle {
            background-color: #092582 !important
        }

            .account-icon-block a .blue-circle.disabled, .account-icon-block a:hover .blue-circle.disabled, .account-icon-block a:focus .blue-circle.disabled {
                background-color: #b6b6b6 !important
            }

.odd-even-grey-bg .card-block:nth-child(even) {
}

.odd-even-grey-bg .card-block:nth-child(odd) {
    background-color: #f1f1f1
}

blockquote {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.25
}

.quote blockquote {
    background: url("/Assets/images/icons/icon-quote.png")no-repeat 0 5px;
    padding-left: 60px
}

.blockquote-footer {
    font-size: .8rem;
    line-height: 1.71;
    color: #4d4f53;
    padding-top: 10px
}

.blockquote-border {
    border-left: 4px solid #ffc72c;
    padding-left: 30px;
    margin-top: 1.6rem;
    margin-bottom: 1.5rem
}

@media(min-width: 769px) {
    .blockquote-border {
        max-width: 80%
    }
}

.search-results-title-text {
    font-size: 1.12rem;
    line-height: 1.33;
    margin-bottom: 5px
}

.search-results-link-text {
    font-size: .75rem;
    margin-bottom: 5px
}

.search-results-text {
    line-height: 1.71;
    margin-bottom: 25px
}

.side-filter label {
    font-size: .9rem
}

.side-filter select {
    font-size: 1rem;
    width: auto
}

.search-results-text span, .search-results-highlighted-text {
    background-color: #fff1cc
}

.page-link {
    border: 1px solid #b6b6b6;
    font-size: .75rem
}

.page-item.active .page-link {
    background-color: #235ba8;
    border-color: #235ba8
}

.banner-blue {
    border-radius: 12px;
    background-color: #235ba8;
    color: #fff;
    line-height: 1.5
}

    .banner-blue .title-h4 {
        color: #fff
    }

.user-block-grey {
    font-size: .875rem;
    padding: 10px;
    background-color: #f1f1f1;
    margin-bottom: 24px
}

    .user-block-grey > [class^="col-"]:last-child {
        text-align: right
    }

.user-block-grey-name {
    text-transform: uppercase;
    font-size: .75rem;
    font-weight: bold
}

.user-block-grey .fa {
    color: #b6b6b6
}

.user-block-grey .custom-select, .filter-group .custom-select {
    height: auto;
    min-height: 0;
    font-style: normal;
    padding: .25rem 1.75rem .25rem .7rem
}

.filter-group .custom-select {
    width: auto
}

.user-block-grey .custom-select, .user-block-grey .custom-radio, .user-block-grey label {
    font-size: .75rem
}

.filter-group .custom-select, .filter-group .custom-radio .filter-group label {
}

.user-block-grey .custom-radio, .filter-group .custom-radio {
    padding-left: 1.5rem
}

.user-block-grey .custom-control-indicator {
    width: .75rem;
    height: .75rem
}

@media(max-width: 768px) {
    .table-overflow {
        overflow-x: auto
    }

        .table-overflow table {
            min-width: 780px
        }
}

@media(max-width: 575px) {
    .user-block-grey {
        font-size: .75rem
    }

        .user-block-grey > [class^="col-"]:last-child {
            text-align: left;
            margin-top: 10px
        }
}

@media(min-width: 576px) {
    .user-block-grey form {
        text-align: right
    }
}

@media(max-width: 768px) {
    .or-divider {
        text-align: center;
        position: relative;
        top: 20px
    }

        .or-divider span {
            display: inline-block
        }

    .col-divider {
        margin-bottom: 20px
    }
}

.or-divider span, .or-divider-horizontal span {
    background-color: #fff;
    padding: 7px
}

.col-divider, .or-divider-horizontal {
    border-bottom: 1px solid #f1f1f1
}

.or-divider-horizontal {
    text-align: center;
    font-size: .875rem;
    position: relative;
    margin-bottom: 30px
}

@media(max-width: 767px) {
    .or-divider-horizontal {
        margin-top: 30px
    }
}

.or-divider-horizontal span {
    position: absolute;
    top: 50%;
    margin-top: -18px;
    left: 50%;
    margin-left: -18px
}

@media(min-width: 769px) {
    .or-divider span {
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -10px;
        font-size: .875rem
    }

    .col-divider {
        border-bottom: 0
    }

        .col-divider:after {
            background: #f1f1f1;
            bottom: 0;
            content: " ";
            right: 15px;
            position: absolute;
            top: 0;
            width: 1px;
            z-index: -1
        }
}

.login-form {
    margin: 10em auto auto auto;
    background: rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 9px 0 rgba(50,50,50,.1);
    -moz-box-shadow: 0 0 9px 0 rgba(50,50,50,.1);
    box-shadow: 0 0 9px 0 rgba(50,50,50,.1)
}

.login-bg {
    background-repeat: no-repeat;
    background-size: cover
}

.login-form-container {
    text-align: center;
    padding-bottom: 30px;
    margin-bottom: 24px
}

.account-container .card-block p, .grey-rounded-corners-lg.card-block p {
    line-height: 1.29;
    margin-bottom: 8px
}

.account-container .block-grey-rounded i {
    font-size: 5em;
    margin: 0 .3em 0 0
}

.account-container .block-grey-rounded .user-plus-icon {
    font-size: 2.5em !important;
    position: absolute;
    left: 50px;
    top: 50px;
    color: #ffc72c;
    background: #f1f1f1
}

@media(min-width: 768px) {
    .login-form {
        width: 45%
    }
}

@media(min-width: 1025px) {
    .login-form {
        width: 30%;
        max-width: 300px
    }
}

@media(max-width: 991px) {
    .login-form-container {
        margin-top: 2em
    }
}

@media(max-width: 540px) {
    .login-form-container {
        background-image: url(/Assets/images/bkg_login_mobile.png)
    }
}

@media(max-width: 769px) {
    .login-form-container {
        padding-left: 15px;
        padding-right: 15px
    }

    .account-container .block-grey-rounded i {
        font-size: 3.5em
    }

    .account-container .block-grey-rounded .user-plus-icon {
        font-size: 1.5em !important;
        left: 29px;
        top: 36px
    }
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px
}

    .pagination > li {
        display: inline
    }

        .pagination > li > a, .pagination > li > span {
            font-size: 12px;
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd
        }

        .pagination > li:first-child > a, .pagination > li:first-child > span {
            margin-left: 0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px
        }

        .pagination > li:last-child > a, .pagination > li:last-child > span {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px
        }

        .pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
            z-index: 2;
            color: #23527c;
            background-color: #eee;
            border-color: #ddd
        }

    .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
        z-index: 3;
        color: #fff;
        cursor: default;
        background-color: #235ba8;
        border-color: #235ba8
    }

    .pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover {
        color: #777;
        cursor: not-allowed;
        background-color: #fff;
        border-color: #ddd
    }

.pagination-lg > li > a, .pagination-lg > li > span {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333
}

.pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px
}

.pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px
}

.pagination-sm > li > a, .pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5
}

.pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px
}

.pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px
}

.pager {
    padding-left: 0;
    margin: 20px 0;
    text-align: center;
    list-style: none
}

    .pager li {
        display: inline
    }

        .pager li > a, .pager li > span {
            display: inline-block;
            padding: 5px 14px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 15px
        }

            .pager li > a:focus, .pager li > a:hover {
                text-decoration: none;
                background-color: #eee
            }

    .pager .next > a, .pager .next > span {
        float: right
    }

    .pager .previous > a, .pager .previous > span {
        float: left
    }

    .pager .disabled > a, .pager .disabled > a:focus, .pager .disabled > a:hover, .pager .disabled > span {
        color: #777;
        cursor: not-allowed;
        background-color: #fff
    }

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em
}

.image-map {
    position: relative;
    margin-top: 40px;
    display: inline-block
}

    .image-map a {
        text-indent: -9999rem
    }

    .image-map img {
        max-width: 100%;
        height: auto
    }

.modal-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.25 !important;
    font-size: 1.5rem !important;
    font-weight: normal !important
}

.modal-header button.close {
    font-size: 2rem;
    opacity: 1;
    color: #235ba8
}

    .modal-header button.close:hover, .modal-header button.close:focus {
        color: #092852
    }

.modal-header {
    padding: 18px 22px
}

.modal-body {
    padding: 22px
}

.map-mobile-popup {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0
}

    .map-mobile-popup .modal-content {
        height: 100%;
        min-height: 100%;
        height: auto;
        border-radius: 0
    }

    .map-mobile-popup .modal-header {
        color: #000;
        background-color: #ddd;
        padding: 5px 15px
    }

        .map-mobile-popup .modal-header .modal-title {
            font-size: 1rem !important;
            line-height: 1.5 !important
        }

        .map-mobile-popup .modal-header .close {
            margin-top: -4px;
            color: #000;
            text-shadow: none
        }

@media print {
    footer, section.blue-section, .current-outages, .navbar-container, .circle.blue-circle.search-icon, .circle.navbar-toggler.navbar-toggler-right, .inner-container > .col-lg-3 {
        display: none
    }

    .table tbody, .table-careers [class^="col-"], .block-grey-dividers, p {
        font-size: .75rem !important
    }

    .block-grey-dividers {
        padding: 2px
    }

    .table th, .table td {
        padding: .3rem .5rem !important
    }

        .table th:after, header > .top-section > .inner-container .col-lg-4 {
            display: none
        }

    header > .top-section > .inner-container .logo-header {
        display: block !important
    }

    .inner-container > .col-lg-9, header > .top-section > .inner-container .col-lg-8 {
        width: 100% !important
    }

    .table-overflow table {
        min-width: 0 !important
    }

    * {
        line-height: 1 !important
    }
}

.mathCall {
    border-radius: 5px;
    padding: 10px;
    background-color: #235ba8;
    color: #fff
}

.credentials-content {
    margin-right: 20rem;
    color: #235ba8;
    font-size: .75em;
    min-height: 28px;
    text-align: right;
    position: absolute;
    right: 0;
    margin-top: 6px
}

.esriSimpleSlider {
    position: absolute;
    text-align: center;
    border: 2px solid #f1f1f1 !important;
    background-color: #fff;
    color: #235ba8 !important;
    cursor: pointer;
    -webkit-border-radius: 20px !important;
    -moz-border-radius: 20px !important;
    -o-border-radius: 20px !important;
    border-radius: 20px !important;
    top: 10px !important;
    left: 10px !important
}

.esriSimpleSliderVertical .esriSimpleSliderIncrementButton {
    border-bottom: 2px solid #f1f1f1 !important;
    color: #235ba8 !important
}

.outage-map .esriSimpleSlider div {
    width: 30px !important;
    height: 40px !important;
    font-size: 1.125rem !important;
    font-weight: bold !important;
    line-height: 1.5rem !important;
    padding-top: 6px !important
}

#helpModal .esriSimpleSlider div {
    width: 100% !important;
    height: 30px !important;
    font-size: .75rem !important;
    font-weight: bold !important;
    line-height: 1.8rem !important;
    padding-top: 3px !important
}

.slidericon:not(.legend-p) {
}

.legend-p.slidericon .esriSimpleSlider {
    cursor: default;
    display: inline-block;
    left: -5px !important;
    top: 0 !important;
    width: 27px;
    height: 64px
}

#PowerLineTechnician .esriPopup {
    -moz-box-shadow: 0 6px 12px 0 rgba(77,79,83,.16);
    -webkit-box-shadow: 0 6px 12px 0 rgba(77,79,83,.16);
    -o-box-shadow: 0 6px 12px 0 rgba(77,79,83,.16);
    box-shadow: 0 6px 12px 0 rgba(77,79,83,.16);
    font-family: 'Fira Sans',sans-serif !important;
    font-size: .75rem;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0
}

    #PowerLineTechnician .esriPopup .esriPopupWrapper {
        -moz-box-shadow: 0 6px 12px 0 rgba(77,79,83,.16);
        -webkit-box-shadow: 0 6px 12px 0 rgba(77,79,83,.16);
        -o-box-shadow: 0 6px 12px 0 rgba(77,79,83,.16);
        box-shadow: 0 6px 12px 0 rgba(77,79,83,.16);
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        -o-border-radius: 0;
        border-radius: 0
    }

    #PowerLineTechnician .esriPopup .titlePane {
        background: transparent;
        color: #092852;
        line-height: 0;
        height: 6px;
        padding-left: 6px;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        -o-border-radius: 0;
        border-radius: 0;
        border: 0;
        border-bottom: none
    }

#PowerLineTechnician .small {
    background-color: #ffc72c
}

#PowerLineTechnician .medium.unplanned {
    background-color: #ff8c00
}

#PowerLineTechnician .medium.planned {
    background-color: #235ba8
}

#PowerLineTechnician .large {
    background-color: #d0021b
}

#PowerLineTechnician .extralarge .titlePane {
    background: #d0021b;
    background: -webkit-linear-gradient(left,#ffc72c,#d0021b);
    background: -o-linear-gradient(left,#ffc72c,#d0021b);
    background: -moz-linear-gradient(left,#ffc72c,#d0021b);
    background-image: -ms-linear-gradient(left,#ffc72c,#d0021b);
    background: linear-gradient(left,#ffc72c,#d0021b)
}

#PowerLineTechnician .esriPopup .titleButton.maximize, #PowerLineTechnician .esriPopup .titlePane .title {
    display: none
}

#PowerLineTechnician .esriPopup .titleButton.close {
    top: 12px;
    right: 10px;
    width: 24px;
    height: 27px;
    background: none;
    z-index: 999;
    opacity: 1
}

#PowerLineTechnician .esriPopup .titleButton.next, #PowerLineTechnician .esriPopup .titleButton.prev {
    top: 12px;
    right: 35px;
    width: 24px;
    height: 27px;
    background: none;
    z-index: 999
}

    #PowerLineTechnician .esriPopup .titleButton.close:before, #PowerLineTechnician .esriPopup .titleButton.next:before, #PowerLineTechnician .esriPopup .titleButton.prev:before {
        font-family: 'FontAwesome';
        position: absolute;
        left: 0;
        top: 5px;
        display: block;
        color: #092852;
        font-size: 1.2rem;
        width: 24px;
        height: 27px;
        text-align: center;
        content: ""
    }

    #PowerLineTechnician .esriPopup .titleButton.next:before {
        content: "";
        top: 1rem
    }

    #PowerLineTechnician .esriPopup .titleButton.prev:before {
        content: "";
        top: 1rem
    }

#PowerLineTechnician .esriPopup .contentPane {
    position: relative;
    padding: 12px 6px 7px 10px;
    background-color: #fff;
    border: 0;
    border-top: none;
    border-bottom: none;
    color: #4d4f53
}

#PowerLineTechnician hr {
    border-top: 1px solid #b6b6b6;
    margin-top: 5px
}

#PowerLineTechnician .esriPopup .contentPane h4 {
    font-size: 1rem;
    line-height: 1.2rem !important;
    font-weight: bold;
    margin-right: 30px;
    margin-bottom: 15px
}

#PowerLineTechnician .esriPopup .has-title .contentPane h4 {
    margin-bottom: 5px;
    margin-right: 60px
}

    #PowerLineTechnician .esriPopup .has-title .contentPane h4 + div {
        font-size: .6rem
    }

#PowerLineTechnician .esriPopup .contentPane p {
    margin-bottom: 7px;
    font-size: .75rem;
    line-height: 1.5
}

#PowerLineTechnician .esriPopup a {
    color: #235ba8;
    text-decoration: none
}

.esriPopup .outerPointer.right {
    width: 0;
    height: 0;
    margin-top: -10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #fff;
    background: none
}

.esriPopup .outerPointer.left {
    width: 0;
    height: 0;
    margin-top: -10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #fff;
    background: none
}

.esriPopup .pointer.bottomLeft {
    width: 0 !important;
    height: 0 !important;
    border-style: solid;
    border-width: 50px 30px 0 0;
    border-color: #f9f9f9 transparent transparent transparent;
    background: none
}

.esriPopup .pointer.bottomRight {
    width: 0 !important;
    height: 0 !important;
    border-style: solid;
    border-width: 0 30px 50px 0;
    border-color: transparent #f9f9f9 transparent transparent;
    background: none
}

.esriPopup .pointer.bottom {
    width: 0 !important;
    height: 0 !important;
    margin-left: -16px !important;
    border-style: solid;
    border-width: 24px 16px 0 16px;
    border-color: #f9f9f9 transparent transparent transparent;
    background: none
}

.esriPopup .pointer.top {
    width: 0 !important;
    height: 0 !important;
    margin-left: -16px !important;
    border-style: solid;
    border-width: 0 16px 24px 16px;
    border-color: transparent transparent #fff transparent;
    background: none;
    z-index: -1
}

.esriPopup .pointer.topRight {
    width: 0 !important;
    height: 0 !important;
    border-style: solid;
    border-width: 0 0 50px 30px;
    border-color: transparent transparent #fff transparent;
    background: none;
    z-index: -1
}

#PowerLineTechnician .small .pointer.top, #PowerLineTechnician .small .pointer.topRight {
    border-color: transparent transparent #ffc72c transparent
}

#PowerLineTechnician .medium.unplanned .pointer.top, #PowerLineTechnician .medium.unplanned .pointer.topRight {
    border-color: transparent transparent #ff8c00 transparent
}

#PowerLineTechnician .medium.planned .pointer.top, #PowerLineTechnician .medium.planned .pointer.topRight {
    border-color: transparent transparent #235ba8 transparent
}

#PowerLineTechnician .large .pointer.top, #PowerLineTechnician .large .pointer.topRight {
    border-color: transparent transparent #d0021b transparent
}

.esriPopup .pointer.topLeft {
    width: 0 !important;
    height: 0 !important;
    border-style: solid;
    border-width: 50px 0 0 30px;
    border-color: transparent transparent transparent #fff;
    background: none;
    z-index: -1
}

#PowerLineTechnician .small .pointer.topLeft {
    border-color: transparent transparent transparent #ffc72c
}

#PowerLineTechnician .medium.unplanned .pointer.topLeft {
    border-color: transparent transparent transparent #ff8c00
}

#PowerLineTechnician .medium.planned .pointer.topLeft {
    border-color: transparent transparent transparent #235ba8
}

#PowerLineTechnician .large .pointer.topLeft {
    border-color: transparent transparent transparent #d0021b
}

#PowerLineTechnician .esriPopup .actionsPane {
    padding: 0 10px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    border: 0;
    height: 36px;
    line-height: 36px;
    background-color: #f9f9f9;
    border-top: solid 1px #f1f1f1;
    text-align: center
}

.esriPopup .actionsPane .action {
    position: relative;
    font-weight: bold;
    text-transform: capitalize
}

    .esriPopup .actionsPane .action.zoomTo:before {
        font-family: 'FontAwesome';
        position: absolute;
        left: -20px;
        top: 0;
        display: block;
        color: #ffc72c;
        font-size: 1rem;
        line-height: .9rem;
        font-weight: normal;
        content: ""
    }

.col .cards-vertical {
    background: transparent
}

    .col .cards-vertical:not(:last-child) .card-block {
        margin-bottom: 24px
    }

@media(max-width: 600px) {
    .col .cards-vertical:last-child .card-block {
        margin-bottom: 24px
    }
}

.twitter-wrap {
    max-height: 500px;
    overflow-y: auto;
    position: relative
}

.img-card figure {
    background-color: #f1f1f1;
    display: table;
    height: 100%;
    margin-bottom: 0
}

.img-card figcaption {
    padding: 18px
}

.img-card [class^="col-"] {
    padding-bottom: 15px
}

@media screen and (min-width: 768px) {
    .meter-reading {
        position: absolute;
        bottom: 50px;
        left: 0;
        right: 0
    }
}

@media screen and (max-width: 414px) {
    #rc-imageselect, .g-recaptcha {
        -webkit-transform: scale(.77);
        -moz-transform: scale(.77);
        -ms-transform: scale(.77);
        -o-transform: scale(.77);
        transform: scale(.77);
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        transform-origin: 0 0
    }
}

@media(min-width: 992px) {
    .blue-section .row {
        display: flex;
        flex-flow: row nowrap
    }

    .row.section-block-tall.article-no-images {
        display: flex;
        flex-flow: row nowrap
    }
}

@media(max-width: 767px) {
    .col-fix .col {
        flex: 1 0 100%
    }
}

.custom-control-label::before {
    border: unset
}

.breadcrumb-item + .breadcrumb-item::before {
    float: unset
}

@media(min-width: 768px) {
    .form-group {
        margin-bottom: 1.875rem
    }
}

div + legend {
    margin-top: 36px
}

@media(max-width: 767px) {
    .form-group [class^="col-"]:not(:last-child) {
        margin-bottom: 1rem
    }

    .form-group [class^="col-"].radio-controls {
        margin-bottom: 1rem
    }

    .form-group [class^="col-"]:first-child:last-child, .form-group [class^="col-"]:last-child {
        margin-bottom: 0
    }

    .align-items-center [class^="col-"]:not(:last-child) {
    }
}

input[type="text"], input[type="password"], input[type="tel"], input[type="time"], input[type="number"], input[type="date"], input[type="email"] {
    width: 100%;
    min-height: 42px;
    padding: 7px 7px 7px 11px;
    background-color: #fff;
    border: solid 1px #b6b6b6;
    font-size: .9rem;
    color: #1c1d1e;
    border-radius: 0 !important;
    font-family: 'Fira Sans',sans-serif
}

    input[type="date"]:not(:focus):not(.has-content) {
    }

.input-file-container {
    position: relative
}

.input-file-trigger {
    display: block;
    color: #235ba8;
    cursor: pointer;
    margin-bottom: 0
}

.input-file {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    padding: 14px 0;
    cursor: pointer
}

    .input-file:hover + .input-file-trigger, .input-file:focus + .input-file-trigger, .input-file-trigger:hover, .input-file-trigger:focus {
    }

.form-control {
    border-radius: 0
}

.datepicker-format {
    display: none
}

.btr-dateinput-calendar[aria-hidden="true"][style] {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none
}

button {
    font-family: 'Fira Sans',sans-serif
}

form .btn-large, form .btn-plain-border {
    min-width: 150px;
    margin-right: 10px
}

    form .btn-large:first-child:last-child, form .btn-large:last-child, form .btn-plain-border:first-child:last-child, form .btn-plain-border:last-child {
        margin-right: 0
    }

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, .form-control:focus {
    background-color: #eef2f5;
    border: solid 1px #235ba8
}

textarea, textarea.form-control {
    min-height: 160px;
    border-radius: 0;
    font-family: 'Fira Sans',sans-serif;
    font-size: .875rem;
    border: solid 1px #b6b6b6
}

.character-count textarea {
    padding-bottom: 30px
}

.custom-file-control {
    border-radius: 0 !important;
    border: solid 1px #b6b6b6
}

    .custom-file-control::before {
        border-radius: 0 !important
    }

    .custom-file-control:lang(en):empty:after {
        content: "Choose file..."
    }

    .custom-file-control:lang(en)::after {
        content: ""
    }

.custom-select, .picker__select--month, .picker__select--year {
    border: solid 1px #b6b6b6;
    border-radius: 0 !important;
    color: #235ba8;
    font-style: italic;
    font-family: 'Fira Sans',sans-serif;
    min-height: calc(2.15rem + 2px);
    height: auto;
    width: 100%
}

.user-block-grey .custom-select {
    width: 85%
}

@media(min-width: 768px) {
    .select-outer {
        display: inline-block
    }

    .user-block-grey .custom-select {
        width: auto
    }
}

.custom-select.has-content, .picker__select--month.has-content, .picker__select--year.has-content {
    color: #1c1d1e;
    font-style: normal
}

.custom-select:focus, .picker__select--month:focus, .picker__select--year:focus {
    background-color: #f1f1f1;
    border: solid 1px #b6b6b6;
    font-style: normal
}

.custom-select[disabled], .picker__select--month[disabled], .picker__select--year[disabled] {
    color: #878787;
    font-style: normal
}

.custom-control {
    padding-left: 1.6rem
}

.custom-radio .custom-control-label, .custom-checkbox .custom-control-label {
    color: #1c1d1e
}

    .custom-checkbox .custom-control-label::before {
        background-color: #fff;
        box-shadow: 0 0 0 1px #fff,0 0 0 3px #235ba8;
        border-radius: 0
    }

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #fff
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23235ba8' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
    background-size: 70% 70%
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,0 0 0 3px #092852
}

.accordion-controls-outages .custom-checkbox .custom-control-label::before {
    width: .75em;
    height: .75em
}

.accordion-controls-outages .custom-control {
    min-height: 1em
}

.accordion-controls-outages .custom-checkbox .custom-control-label::after {
    background-position: left top
}

.accordion-controls-outages .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-size: 50% 50%
}

.custom-radio .custom-control-label::before {
    background-color: #fff;
    box-shadow: 0 0 0 2px #fff,0 0 0 4px #235ba8;
    width: 12px;
    height: 12px
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: none
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #235ba8
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 2px #fff,0 0 0 4px #235ba8
}

.custom-control-input:disabled ~ .custom-control-label::before {
    box-shadow: 0 0 0 2px #fff,0 0 0 4px #b6b6b6
}

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: #b6b6b6
}

.custom-radio .custom-control-input:disabled ~ .custom-control-label::before {
    background-color: #fff
}

.custom-control-input[type="checkbox"]:disabled ~ .custom-control-indicator {
    box-shadow: 0 0 0 1px #fff,0 0 0 3px #b6b6b6
}

.custom-control-input[type="radio"]:disabled ~ .custom-control-indicator {
    box-shadow: 0 0 0 2px #fff,0 0 0 4px #b6b6b6
}

.custom-checkbox .custom-control-input[type="checkbox"]:indeterminate ~ .custom-control-indicator {
    background-color: #235ba8
}

.character-count-text, textarea[disabled] ~ .character-count-text {
    color: #b6b6b6
}

textarea:focus ~ .character-count-text {
    color: #4d4f53
}

.custom-form p, .custom-form label {
    font-size: .875rem;
    line-height: 1.71
}

.custom-form .custom-select:disabled, .custom-form .picker__select--month:disabled, .custom-form .picker__select--year:disabled {
    color: #878787;
    background-color: transparent
}

.custom-form .review-block {
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 10px
}

    .custom-form .review-block .title {
        text-transform: uppercase;
        font-size: .875rem;
        margin: 0
    }

    .custom-form .review-block .edit-link {
        font-size: .75rem;
        text-align: right;
        font-weight: bold
    }

.label-effect {
    position: relative
}

    .label-effect label {
        position: absolute;
        left: 14px;
        top: 12px;
        color: #235ba8;
        transition: .3s;
        z-index: -1;
        letter-spacing: .5px;
        font-size: 1rem;
        margin: 0
    }

    .label-effect input {
        position: relative;
        background: transparent;
        height: 54px;
        padding-top: 20px;
        font-size: 1rem
    }

    .label-effect .form-control:focus, .label-effect .form-control:disabled, .label-effect .form-control[readonly] {
        background: transparent
    }

    .label-effect .form-control:disabled, .label-effect .form-control[readonly] {
        color: #878787
    }

    .label-effect input:focus ~ label, .label-effect .has-content ~ label, .label-effect input[type=date] ~ label, .label-effect input[type=time] ~ label, .label-effect .form-control.has-content:disabled ~ label, .label-effect .form-control.has-content[readonly] ~ label {
        top: 8px;
        left: 11px;
        font-size: .6rem;
        transition: .3s;
        z-index: 1
    }

    .label-effect .has-content ~ label, .label-effect .form-control:disabled ~ label, .label-effect.form-control[readonly] ~ label {
        color: #4d4f53
    }

    .label-effect .focus-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        background-color: transparent;
        transition: .4s;
        z-index: -1
    }

    .label-effect input:focus ~ .focus-bg {
        transition: .4s;
        width: 100%;
        background-color: #eef2f5
    }

.error-message {
    display: none;
    background-color: #d0011b;
    color: #fff;
    font-size: .875rem;
    padding: 9px 11px
}

.has-error input[type="text"], .has-error input[type="password"], .has-error input[type="email"], .has-error input[type="tel"], .has-error input[type="number"], .has-error input[type="date"], .has-error input[type="time"], .has-error select, .has-error textarea {
    border: 1px solid #d0011b
}

.has-error .error-message {
    display: block
}

.has-error .character-count-text, .has-error select, .has-error .label-effect label {
    color: #d0011b;
    font-style: normal
}

.has-error select {
}

.has-error .custom-radio .custom-control-label, .has-error .custom-checkbox .custom-control-label {
    color: #d0011b
}

    .has-error .custom-radio .custom-control-label::before {
        background-color: #fff;
        box-shadow: 0 0 0 2px #fff,0 0 0 4px #d0011b;
        width: 12px;
        height: 12px
    }

.has-error .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: none
}

.has-error .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #d0011b
}

.has-error .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 2px #fff,0 0 0 4px #d0011b
}

.character-count {
    position: relative
}

.character-count-text {
    font-size: .75rem;
    position: absolute;
    right: 35px;
    bottom: 5px
}

#frmAdditionalInformation .character-count-text {
    right: 20px
}

.progress-node-blue, .progress-node-yellow, .progress-node-grey {
    position: relative;
    min-height: 60px;
    margin-left: 15px;
    padding: 0 1px 25px 35px
}

    .progress-node-grey:not(.last) {
        border-left: 3px solid #878787
    }

    .progress-node-yellow:not(.last) {
        border-left: 3px solid #ffc72c
    }

    .progress-node-blue:not(.last) {
        border-left: 3px solid #235ba8
    }

    .progress-node-blue.last .progress-node-yellow.last, .progress-node-grey.last, .form-wizard .steps-list > div.last, .form-wizard .steps-list [class*="step-li-"]:last-child {
        border-left: 3px solid transparent !important
    }

    .progress-node-blue h2, .progress-node-yellow h2, .progress-node-grey h2 {
        margin-top: 0;
        font-size: 1.125rem;
        line-height: 1.67;
        color: #4d4f53
    }

    .progress-node-blue h2 {
        color: #235ba8
    }

    .progress-node-blue .form-group + p, .progress-node-yellow .form-group + p, .progress-node-grey .form-group + p, .custom-form .form-group + p {
        margin-bottom: 5px
    }

    .form-wizard .circle, .progress-node-blue h2 .circle, .progress-node-yellow h2 .circle, .progress-node-grey h2 .circle {
        position: absolute;
        top: 0;
        left: -20px
    }

    .progress-node-blue h2 .circle {
        background-color: #235ba8;
        color: #fff;
        display: inline-block;
        margin-right: 20px;
        float: left
    }

    .progress-node-yellow h2 .circle .fa, .progress-node-grey h2 .circle .fa {
        display: none
    }

    .progress-node-blue h2 .circle .icon {
        display: none
    }

    .progress-node-yellow h2 .circle {
        background-color: #ffc72c;
        display: inline-block;
        font-weight: bold;
        margin-right: 20px;
        color: #4d4f53;
        float: left
    }

    .progress-node-yellow h2, .progress-node-yellow h2 a:link, .progress-node-yellow h2 a:visited, .progress-node-yellow h2 a:hover, .progress-node-yellow h2 a:active, .progress-node-yellow h2 a:focus {
        color: #4d4f53;
        text-decoration: none;
        cursor: text
    }

    .progress-node-grey h2 .circle {
        background-color: #878787;
        display: inline-block;
        font-weight: bold;
        color: #fff;
        margin-right: 20px;
        float: left
    }

    .progress-node-grey .btn-text-only, .progress-node-yellow .btn-text-only {
        cursor: text;
        outline: 0
    }

        .progress-node-grey .btn-text-only.disabled, .progress-node-grey .btn-text-only:disabled, .progress-node-yellow .btn-text-only.disabled, .progress-node-yellow .btn-text-only:disabled {
            cursor: not-allowed;
            opacity: 1 !important
        }

        .progress-node-grey .btn-text-only:focus, .progress-node-yellow .btn-text-only:focus {
            outline: 0;
            box-shadow: none
        }

    .progress-node-grey h2, .progress-node-grey h2 a:link, .progress-node-grey h2 a:visited, .progress-node-grey h2 a:hover, .progress-node-grey h2 a:active, .progress-node-grey h2 a:focus {
        color: #878787;
        text-decoration: none;
        cursor: text
    }

.btr-dateinput-value {
    position: absolute;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-style: solid;
    border-color: transparent;
    pointer-events: none
}

    .btr-dateinput-value[style] {
        color: inherit !important
    }

.btr-dateinput-calendar {
    position: absolute;
    visibility: hidden;
    display: inline-block;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #fff;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    font-family: 'Fira Sans',sans-serif;
    font-size: .85em;
    text-align: center;
    opacity: 1;
    -webkit-transition: .1s ease-out;
    transition: all .1s ease-out 0s;
    width: 17em;
    max-height: 18.25em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate3d(0,0,0);
    transform-origin: 0 0 0;
    box-shadow: none
}

.btr-dateinput-calendar-months {
    position: absolute;
    margin-top: 1px;
    top: 2.5em;
    left: 0;
    visibility: hidden
}

.btr-dateinput-calendar[aria-expanded=true] {
    max-height: 14.5em
}

    .btr-dateinput-calendar[aria-expanded=true] .btr-dateinput-calendar-months {
        visibility: inherit
    }

.btr-dateinput-calendar[aria-hidden=true] {
    opacity: 0
}

.btr-dateinput-calendar-header {
    position: relative;
    margin: 0;
    height: 2.5em;
    line-height: 2.5em !important;
    font-weight: 700;
    white-space: nowrap;
    background: #235ba8;
    text-shadow: 0 1px 0 #555;
    border-bottom: 1px solid #235ba8
}

    .btr-dateinput-calendar-header > a {
        width: 2.5em;
        height: 2.5em;
        position: absolute;
        left: 0;
        top: 0;
        color: inherit
    }

    .btr-dateinput-calendar-header > time {
        display: block
    }

    .btr-dateinput-calendar-header > a:before {
        content: '◄'
    }

    .btr-dateinput-calendar-header > a:before {
        font-size: .85em
    }

    .btr-dateinput-calendar-header > a + a {
        left: auto;
        right: 0
    }

        .btr-dateinput-calendar-header > a + a:before {
            content: '►'
        }

.btr-dateinput-calendar-days, .btr-dateinput-calendar-months {
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse;
    color: #555;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #ddd;
    border-bottom: 0
}

    .btr-dateinput-calendar-days > thead {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #ababab;
        font-size: .85em;
        background: #ddd;
        font-weight: 700;
        text-shadow: 0 1px 0 #f3f3f3
    }

.btr-dateinput-calendar td, .btr-dateinput-calendar th {
    width: 2.5em;
    height: 2.25em;
    line-height: 2.25;
    padding: 0;
    text-align: center
}

.btr-dateinput-calendar-months td {
    line-height: 4;
    height: 4em
}

.btr-dateinput-calendar-months time {
    display: block
}

.btr-dateinput-calendar .current {
    color: #1d489a;
    background-color: #fff
}

.btr-dateinput-calendar-past, .btr-dateinput-calendar-future {
    color: #878787;
    background-color: #f1f1f1
}

.btr-dateinput-calendar-out {
    color: #878787;
    background-color: #f1f1f1
}

    .btr-dateinput-calendar-out.current {
        color: #4d4f53;
        background-color: #fff
    }

.btr-dateinput-calendar-today, .btr-dateinput-calendar td:hover, .btr-dateinput-calendar-today.current {
    color: #fff;
    background-color: #1d489a
}

.btr-dateinput-calendar-header > a:hover, td.btr-dateinput-calendar-today:hover {
    background-color: #1d489a;
    text-decoration: none
}

.btr-dateinput-value + input::-moz-placeholder {
    color: #ababab
}

.btr-dateinput-value + input:-ms-input-placeholder {
    color: #ababab !important
}

.btr-dateinput-value + input::-webkit-input-placeholder {
    color: #ababab
}

.navbar {
    padding: 0
}

@media(max-width: 991px) {
    .navbar-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%
    }

    .navbar {
        background: #fff
    }

    .navbar-container.on {
        background: #fff;
        z-index: 50;
        height: 100%
    }

    .navbar-collapse {
        margin-top: 10px
    }

    .nav-toggle-mobi {
        margin-top: 40px;
        margin-bottom: 30px
    }

    .navbar-container .nav-toggle-mobi {
        display: none
    }

    .navbar-container.on .nav-toggle-mobi {
        display: block
    }
}

@media(min-width: 992px) {
    .navbar-outer {
        border-top: 1px solid #f1f1f1;
        border-bottom: 1px solid #f1f1f1;
        margin-top: 4px
    }

    .nav-item.show .nav-link {
        margin-top: -8px;
        border-bottom: 8px solid #f1f1f1 !important
    }

    .navbar-nav {
        width: 100%;
        display: flex;
        justify-content: space-between
    }

    .nav-link {
        display: inline-block
    }
}

@media(min-width: 992px) {
    .navbar-collapse {
        padding-left: 42px;
        padding-right: 42px
    }
}

.nav-item {
}

.navbar-light .navbar-nav .nav-link:not(.icon-link) {
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .6px;
    text-align: left;
    color: #235ba8;
    text-transform: uppercase;
    padding: .95rem 1rem;
    background: transparent;
    border-right: 0;
    border-left: 0;
    border-bottom: 0;
    cursor: pointer
}

.navbar-light .navbar-nav .icon-link {
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .6px;
    text-align: left;
    color: #235ba8;
    padding: 1.3rem 1rem
}

    .navbar-light .navbar-nav .icon-link span {
        font-weight: normal;
        padding-left: 10px
    }

    .navbar-light .navbar-nav .icon-link .fa {
        color: #ffc72c;
        padding-right: 10px
    }

.mega-dropdown {
    position: static !important
}

.mega-dropdown-menu {
    padding: 20px;
    width: 100%;
    box-shadow: none;
    -webkit-box-shadow: none
}

.dropdown-menu > li > ul, .dropdown-menu > li > ul > li .no-sublinks {
    padding: 0;
    margin: 0
}

    .dropdown-menu > li > ul > li .no-sublinks {
    }

        .dropdown-menu > li > ul > li .no-sublinks li {
            list-style: none
        }

    .dropdown-menu > li > ul > li, .dropdown-menu .no-submenu li {
        list-style: none
    }

.dropdown-menu .no-submenu {
    padding-left: 0
}

.left-submenu + .no-submenu {
    margin-top: 25px
}

.dropdown-menu > li > ul > li > a {
    display: block;
    padding: .4rem 1.5rem;
    clear: both;
    font-weight: normal;
    line-height: 1.29;
    font-size: .85rem;
    color: #4d4f53;
    white-space: normal
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover, .mega-dropdown-menu > li > ul > li > a:focus, .mega-dropdown-menu > li > ul > li > a:hover {
    color: #092852
}

.mega-dropdown-menu > li > ul > li > a:focus, .mega-dropdown-menu > li > ul > li > a:hover {
    text-decoration: underline
}

.dropdown-header, a.dropdown-header {
    color: #235ba8 !important;
    font-weight: bold !important;
    text-transform: uppercase
}

.dropdown-menu {
    padding: 0;
    margin: 0;
    color: #292b2c;
    background-color: #f1f1f1;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 0;
    border-radius: 0
}

.navbar-light .navbar-toggler {
    border: 0;
    padding: 0;
    margin-top: 40px
}

    .navbar-light .navbar-toggler .fa-bars {
        color: #fff
    }

    .navbar-light .navbar-toggler .fa-times {
        font-size: 18px;
        line-height: 1.33;
        text-align: center;
        color: #092852
    }

.navbar-toggler[aria-expanded="true"] ~ .navbar-brand, .navbar-toggler[aria-expanded="true"] .fa-times {
    display: inline-block
}

@media(min-width: 992px) {
    .navbar-light .navbar-nav .nav-link {
        font-size: .75rem;
        text-align: center;
        border-top: 4px solid transparent
    }

    .show > .dropdown-menu {
        display: table;
        table-layout: fixed
    }

    .navbar-light .navbar-nav .show .nav-link, .nav-item.active .nav-link {
        border-top: 4px solid #ffc72c
    }

    .navbar-light .navbar-nav .show .nav-link {
        background: #f1f1f1;
        -webkit-box-shadow: 0 2px 4px 0 rgba(77,79,83,.5);
        -moz-box-shadow: 0 2px 2px 0 rgba(77,79,83,.5);
        box-shadow: 0 2px 4px 0 rgba(77,79,83,.5);
        border-top: 4px solid #ffc72c;
        outline: 0;
        outline-offset: 0;
        outline-style: none
    }

    .dropdown-menu {
        padding: 0;
        margin: 0;
        color: #292b2c;
        background-color: #f1f1f1;
        -webkit-box-shadow: 0 2px 4px 0 rgba(77,79,83,.5);
        -moz-box-shadow: 0 2px 4px 0 rgba(77,79,83,.5);
        box-shadow: 0 3px 4px 0 rgba(77,79,83,.5)
    }

        .dropdown-menu > li:not(:last-child) {
            padding: 1.5rem 0;
            border-right: 1px solid #fff
        }

        .dropdown-menu > li {
            display: table-cell
        }

    .dropdown-header {
        font-size: .75rem !important
    }

    li + .dropdown-header {
        margin-top: 20px
    }

    .navbar-toggler[aria-expanded="true"] ~ .navbar-brand, .navbar-toggler[aria-expanded="true"] .fa-times {
        display: none
    }
}

@media(max-width: 991px) {
    .navbar-nav {
        border-top: 1px solid #f1f1f1
    }

    .navbar-light .navbar-nav .nav-link {
        border-bottom: 1px solid #f1f1f1 !important;
        font-size: 1.1rem;
        width: 100%;
        border-top: 0
    }
}

.navbar-toggler[aria-expanded="false"] {
    background-color: #235ba8;
    color: #fff;
    font-size: 1.1rem
}

    .navbar-toggler[aria-expanded="false"] .fa-times {
        display: none
    }

.navbar-toggler[aria-expanded="true"] .fa-bars {
    display: none
}

.navbar-light .navbar-brand {
    display: none;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.25;
    text-align: left;
    color: #1c1d1e
}

.left-nav-button, .left-nav-button:focus {
    background-color: #f1f1f1;
    position: relative;
    width: 100%;
    border: 0;
    text-align: left;
    outline: 0
}

    .left-nav-button, .left-nav-button .nav-link:link, .left-nav-button .nav-link:visited, .left-nav-button .nav-link:hover, .left-nav-button .nav-link:focus, .left-nav-button .nav-link:active {
        font-size: 1.1rem;
        line-height: 1.67;
        color: #4d4f53
    }

        .left-nav-button .fa {
            color: #235ba8;
            position: absolute;
            right: 20px;
            top: 50%;
            margin-top: -10px
        }

        .left-nav-button[aria-expanded=false] .fa-chevron-up {
            display: none
        }

        .left-nav-button[aria-expanded=true] .fa-chevron-up {
            display: block
        }

        .left-nav-button[aria-expanded=false] .fa-chevron-down {
            display: block
        }

        .left-nav-button[aria-expanded=true] .fa-chevron-down {
            display: none
        }

.left-nav, .left-nav-mobile .nav {
    font-size: .75rem;
    border: 1px solid #f1f1f1
}

.left-nav {
    margin-bottom: 50px
}

.left-nav-mobile {
    background-color: #fff;
    margin-bottom: .875rem
}

    .left-nav .nav > li > a, .left-nav-mobile .nav > li > a {
        background-color: #f1f1f1;
        padding: 12px 10px 12px 20px;
        display: block;
        text-transform: uppercase;
        font-weight: bold;
        border-left: 4px solid transparent
    }

        .left-nav .nav > li > a:hover, .left-nav .nav > li > a:focus, .left-nav .nav > li > a.active, .left-nav-mobile .nav > li > a:hover, .left-nav-mobile .nav > li > a:focus, .left-nav-mobile .nav > li > a.active {
            border-left: 4px solid #ffc72c
        }

.left-nav .nav > li ul {
    padding: 15px 0 15px 10px;
    position: relative
}

.left-nav-mobile .nav > li ul {
    padding: 15px 0;
    position: relative
}

#localNavMobile {
    padding: 15px 0 15px 10px !important
}

.left-nav .nav > li > ul:before, .left-nav-mobile .nav > li > ul:before {
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #f1f1f1;
    position: absolute;
    top: 0;
    left: 20px
}

.left-nav .nav > li > ul > li > ul, .left-nav-mobile .nav > li > ul > li > ul {
    padding: 0 0 0 20px
}

    .left-nav .nav > li > ul > li, .left-nav .nav > li > ul > li > ul li, .left-nav-mobile .nav > li > ul > li, .left-nav-mobile .nav > li > ul > li > ul li {
        list-style: none;
        background-color: #fff
    }

        .left-nav .nav > li > ul > li a, .left-nav-mobile .nav > li > ul > li a {
            padding: 7px 15px 7px 15px;
            display: block;
            border-left: 4px solid transparent
        }

            .left-nav .nav > li > ul > li a:hover, .left-nav .nav > li > ul > li a:focus, .left-nav .nav > li > ul > li a.active, .left-nav-mobile .nav > li > ul > li a:hover, .left-nav-mobile .nav > li > ul > li a:focus, .left-nav-mobile .nav > li > ul > li a.active {
                border-left: 4px solid #ffc72c;
                color: #4d4f53
            }

@media(max-width: 991px) {
    .left-nav {
        display: none
    }
}

@media(min-width: 992px) {
    .left-nav-mobile {
        display: none
    }
}

.right-nav.nav li {
    background-color: #f1f1f1;
    border-bottom: 1px solid #fff
}

.right-nav-title {
    font-size: 1.12rem;
    line-height: 1.67;
    padding: 5px 10px 5px 24px;
    margin: 0
}

.right-nav.nav li a {
    padding: 10px 10px 10px 24px;
    display: block;
    font-size: .9rem
}

.dropdown-menu > li > ul > li + .has-submenu {
    margin-top: 20px
}

.back-menu-mobile {
    display: none
}

.dropdown-menu > li > ul > li ul.left-submenu {
    padding: 0;
    margin: 0
}

    .dropdown-menu > li > ul > li ul.left-submenu li a {
        display: block;
        padding: .4rem 1.5rem;
        clear: both;
        font-weight: normal;
        line-height: 1.29;
        font-size: .85rem;
        color: #4d4f53;
        white-space: normal
    }

    .dropdown-menu > li > ul > li ul.left-submenu li {
        list-style: none;
        padding: 0;
        margin: 0
    }

        .dropdown-menu > li > ul > li ul.left-submenu li a:hover {
            color: #235ba8;
            text-decoration: underline
        }

.dropdown-menu > li {
    padding: 1.5rem 0;
    border-right: 1px solid #fff
}

    .dropdown-menu > li:last-child {
        border-right: none
    }

.info-content:nth-child(odd) {
    background-color: #f9f9f9
}

.outage-accordion .card-block {
    padding: 0
}

.outage-accordion {
    margin-bottom: 0 !important;
    position: relative
}

.info-container .info-content {
    padding: 20px
}

.info-content {
    border-bottom: 1px solid #f1f1f1
}

    .info-content:last-child {
        margin-bottom: 20px
    }

.info-content-item {
    margin-bottom: 10px;
    line-height: 1.71
}

    .info-content-item .description {
        font-weight: bold
    }

.outage-mode span.description {
    width: 13%
}

.outage-socila-section .twitter-block {
    max-height: 650px
}

.outage-containte-header span {
    padding-right: 10px
}

.outage-containte-header .custom-control:last-child {
    margin-left: 10px
}

.outage-title {
    position: absolute;
    left: 0;
    top: 0
}

#map-accordion {
    margin-top: 80px
}

.reviw-item {
    float: left;
    width: 100%;
    position: relative
}

    .reviw-item a {
        position: absolute;
        top: 0;
        right: 0;
        color: #4d7bb9;
        font-size: 12px
    }

        .reviw-item a:after {
            font-family: 'FontAwesome';
            content: '';
            position: absolute;
            display: block;
            top: 0;
            left: -15px;
            color: #ffc72c
        }

    .reviw-item h4 {
        font-size: 16px;
        color: #4d4f53;
        font-weight: 200
    }

p.review-item-description {
    color: #6c6d70
}

p.review-item-answer {
    color: #b4b5b6
}

.form-wizard-container .wizard > .content > .body {
    height: 37px;
    overflow: hidden;
    display: block !important;
    margin-bottom: 30px
}

    .form-wizard-container .wizard > .content > .body.current {
        height: auto
    }

.form-wizard-container .wizard > .content {
    background: transparent
}

#helpModal .modal-content {
    border-radius: 1em
}

#helpModal .modal-dialog {
    width: 600px;
    margin: auto;
    margin-top: 8em
}

#helpModal .modal-content .legend-p {
    display: flex;
    position: relative
}

    #helpModal .modal-content .legend-p i {
        font-size: 1.2em
    }

    #helpModal .modal-content .legend-p p {
        padding-left: 1.9rem
    }

#helpModal .modal-content p {
    font-size: .85em
}

#helpModal .modal-content .icon-blue {
    padding-top: 0;
    color: #092852;
    margin-right: .625rem;
    font-size: 1.125rem
}

#helpModal .modal-content h2 {
    font-size: 1rem;
    margin: 1.2em 0;
    font-weight: bolder
}

#helpModal .modal-content .legend-p .icon-color-blue i {
    background-color: #235ba8
}

#helpModal .modal-content .legend-p .legend-txt-blue {
    color: #235ba8
}

#helpModal .modal-content .legend-p .icon-color-orange i {
    background-color: #ff8c00
}

#helpModal .modal-content .legend-p .icon-color-red i {
    background-color: #d0021b
}

#helpModal .modal-content .legend-p .icon-color-yellow i {
    background-color: #ffc72c
}

#helpModal .modal-content .legend-p i.icon-white {
    color: #fff
}

@media(max-width: 768px) {
    #helpModal .modal-dialog {
        width: 430px
    }
}

@media(max-width: 600px) {
    #helpModal .modal-dialog {
        width: 330px;
        margin: auto;
        margin-top: 3em
    }
}

.meter-reading-user-container {
    background-color: #f1f1f1;
    padding: 10px;
    margin-bottom: 20px
}

    .meter-reading-user-container .d-block {
        display: inline-block !important;
        font-size: 12px;
        margin-bottom: 0
    }

    .meter-reading-user-container .custom-select {
        background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 5px center;
        -webkit-background-size: 8px 10px;
        background-size: 8px 10px;
        height: auto;
        font-size: 12px;
        padding: 2px 8px;
        text-align: left;
        min-width: 125px
    }

.user-address {
    float: right
}

.user-name strong {
    font-size: 12px;
    padding-left: 20px
}

.user-name {
    position: relative
}

    .user-name:before {
        font-family: 'FontAwesome';
        content: '';
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        color: #b6b6b6
    }

.col-no-padding .col-sm-6 {
    padding: 0
}

.meter-reading-container, .content-container {
    margin-bottom: 40px
}

    .meter-reading-container .custom-select {
        color: #235ba8
    }

    .meter-reading-container .right-nav-title, .content-container .right-nav-title {
        padding-left: 15px
    }

li.account-details-item {
    padding: 5px 15px
}

.meter-reading-container .user-address .custom-select {
    width: auto;
    color: #464a4c
}

.display-window-image img {
    width: 100%
}

.display-window-image {
    position: relative;
    bottom: -25%
}

.visible-xs {
    display: none !important
}

.account-details-item button {
    margin: 0 auto
}

li.account-details-item.button-container {
    padding: 20px
}

.content-container img {
    width: 100%;
    margin-bottom: 20px
}

.back-to {
    position: relative;
    padding-left: 15px;
    font-size: 12px;
    font-weight: 700
}

    .back-to:before {
        font-family: 'FontAwesome';
        content: '';
        position: absolute;
        left: 0;
        display: block;
        top: -2px;
        font-size: 12px;
        color: #ffc72c
    }

.account-details-item .col-6:last-child {
    text-align: right
}

.content-container .back-to {
    margin-bottom: 50px;
    float: left;
    width: 100%
}

.intro-text {
    font-size: 18px;
    line-height: 26px
}

.meter-reading-container .col-no-padding p.page-text {
    margin-bottom: 5px
}

.custom-form .custom-select {
    width: 100%
}

.form-wizard {
    clear: both
}

    .form-wizard .steps-list {
        padding: 0;
        list-style: none;
        counter-reset: step-number
    }

        .form-wizard .steps-list i {
            font-style: normal
        }

.form-wizard {
    margin-top: 60px;
    position: relative
}

    .form-wizard .steps-list > div i:before {
        display: block;
        content: counter(step-number);
        counter-increment: step-number
    }

    .form-wizard .steps-list .completed i:before {
        content: "";
        font: normal normal normal 16px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 38px
    }

    .form-wizard .completed .circle {
        background-color: #235ba8;
        color: #fff
    }

    .form-wizard .circle {
        background-color: #878787;
        display: inline-block;
        font-weight: bold;
        color: #fff
    }

    .form-wizard .active .circle {
        background-color: #ffc72c;
        color: #4d4f53
    }

    .form-wizard .steps-list > div {
        position: relative;
        margin-left: 15px;
        min-height: 60px;
        padding: 0 1px 25px 35px
    }

    .form-wizard .tab-pane {
        margin-top: 20px
    }

    .form-wizard .steps-list > div.disabled:not(.last) {
        border-left: 3px solid #878787
    }

    .form-wizard .steps-list > div.active:not(.last) {
        border-left: 3px solid #ffc72c
    }

    .form-wizard .steps-list > div.completed:not(.last) {
        border-left: 3px solid #235ba8
    }

    .form-wizard h2 {
        margin: 0;
        font-size: 1.125rem;
        line-height: 1.67;
        color: #878787
    }

    .form-wizard .active h2 {
        color: #4d4f53
    }

    .form-wizard .completed h2 {
        color: #235ba8
    }

    .form-wizard .step-name {
        display: inline-block
    }

    .form-wizard .steps-list > div.disabled {
        cursor: not-allowed !important
    }

    .form-wizard .steps-list > div.last, .form-wizard .steps-list [class*="step-li-"]:last-child {
        margin-bottom: 0
    }

.collapse.in {
    display: block
}

.fade.in {
    opacity: 1
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0)
}

.map-icon {
    position: relative;
    cursor: pointer
}

    .map-icon:before {
        font-family: 'FontAwesome';
        position: absolute;
        left: 0;
        display: block;
        color: #fff;
        font-size: .75rem;
        width: 24px;
        height: 24px;
        border-radius: 100%;
        text-align: center
    }

.legend-p.map-icon:before {
    left: -5px;
    line-height: 2
}

.icn {
}

.icn-AffectedAreas {
    background-image: url("/images/AffectedAreas.png");
    background-repeat: no-repeat;
    display: block
}

.icn-ServiceTerritory {
    background-image: url("/images/ServiceTerritory.png");
    background-repeat: no-repeat;
    display: block
}

.maintenance.map-icon:before {
    content: "";
    background-color: #235ba8
}

.maintenance.map-icon:hover:before {
    background-color: #092852
}

.map-alert-danger.map-icon:before {
    content: ""
}

.map-alert-danger.yellow-alert.map-icon:before {
    background-color: #ffc72c
}

.map-alert-danger.orange-alert.map-icon:before {
    background-color: #ff8c00
}

.map-alert-danger.red-alert.map-icon:before {
    background-color: #d0021b
}

.refresh.map-icon:before {
    content: "";
    color: #ffc72c;
    font-size: 1.125rem
}

.map-alert-danger.multiple-alerts.map-icon:before {
    background: #d0021b;
    background: -webkit-linear-gradient(left,#ffc72c,#d0021b);
    background: -o-linear-gradient(left,#ffc72c,#d0021b);
    background: -moz-linear-gradient(left,#ffc72c,#d0021b);
    background-image: -ms-linear-gradient(left,#ffc72c,#d0021b);
    background: linear-gradient(left,#ffc72c,#d0021b)
}

.map-footer-container {
    background-color: #f9f9f9;
    font-size: .785rem;
    padding: 19px 27px;
    margin-bottom: 18px
}

.map-footer-item {
    font-size: .785rem;
    display: inline-block;
    margin-right: 20px;
    padding-left: 30px;
    line-height: 2
}

    .map-footer-item:last-child {
        margin-right: 0
    }

.icon-blackberry {
    background: url("/Assets/images/icons/icon-blackberry.png") no-repeat center 3px;
    display: inline-block;
    height: 13px;
    width: 13px
}

.serice-area-swatch {
    width: 20px;
    height: 20px;
    border: 1px solid #f1f1f1;
    display: inline-block;
    text-indent: -9999rem;
    background-color: rgba(35,91,168,.3)
}

@media(min-width: 992px) and (max-width:1199px) {
    .map-footer-item {
    }
}

@media only screen and (min-width: 768px) and (max-width:991px) {
    .dropdown .mobile-dropdown {
        position: relative
    }

        .dropdown .mobile-dropdown::after {
            font-family: 'FontAwesome';
            content: '';
            position: absolute;
            right: 25px;
            display: block;
            top: 22px;
            font-size: 14px
        }

    .dropdown.show .mobile-dropdown::after {
        content: ''
    }

    .left-submenu {
        -webkit-backface-visibility: hidden;
        width: 100%;
        top: 0;
        bottom: 0;
        position: fixed;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background: #fff;
        z-index: 1002;
        box-sizing: content-box;
        -webkit-overflow-scrolling: touch;
        -ms-transform: translate(-100%,0);
        -webkit-transform: translate3d(-100%,0,0);
        -moz-transform: translate3d(-100%,0,0);
        -ms-transform: translate3d(-100%,0,0);
        -o-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0);
        left: 0;
        -webkit-transition: -webkit-transform 500ms ease;
        -moz-transition: -moz-transform 500ms ease;
        -ms-transition: -ms-transform 500ms ease;
        -o-transition: -o-transform 500ms ease;
        transition: transform 500ms ease;
        border-top: 6px solid #235ba8
    }

        .left-submenu.move-right {
            -ms-transform: translate(0%,0);
            -webkit-transform: translate3d(0%,0,0);
            -moz-transform: translate3d(0%,0,0);
            -ms-transform: translate3d(0%,0,0);
            -o-transform: translate3d(0%,0,0);
            transform: translate3d(0%,0,0)
        }

    .dropdown-menu > li > ul > li.has-submenu > a, .dropdown-menu > li > ul > li .no-submenu > li a {
        font-size: .875rem;
        text-transform: uppercase;
        color: #235ba8;
        padding: 1.1rem 1.5rem
    }

    .dropdown-menu > li > ul > li.has-submenu {
        position: relative
    }

    .dropdown-menu > li > ul > li .left-submenu + .no-submenu {
        margin-top: 0
    }

    .dropdown-menu > li > ul > li.has-submenu > a, .dropdown-menu > li > ul > li .no-submenu {
        border-bottom: 1px solid #fff
    }

    .dropdown-menu > li > ul > li ul.left-submenu li a:hover {
        text-decoration: none
    }

    .dropdown-menu > li > ul > li.has-submenu > a:after {
        font-family: 'FontAwesome';
        content: '';
        position: absolute;
        right: 25px;
        display: block;
        top: 12px;
        font-size: 18px;
        color: #235ba8
    }

    .back-menu-mobile {
        display: block
    }

    .dropdown-menu > li > ul > li + .has-submenu {
        margin-top: 0
    }

    .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover, .mega-dropdown-menu > li > ul > li > a:focus, .mega-dropdown-menu > li > ul > li > a:hover {
        color: #235ba8
    }

    .dropdown.mega-dropdown.show .nav-link, .dropdown.show .nav-link {
        border-bottom: none !important
    }

    .body-background .notification-block {
        display: none
    }

    body.body-background {
        overflow: hidden;
        position: fixed
    }

    .dropdown-menu > li > ul > li ul.left-submenu li.back {
        position: relative;
        padding: 25.5px 0
    }

        .dropdown-menu > li > ul > li ul.left-submenu li.back a, .dropdown-menu > li > ul > li ul.left-submenu li.back button {
            color: #235ba8;
            text-transform: uppercase;
            font-size: 1.14rem;
            font-weight: bold;
            border: 0;
            background: transparent;
            display: block;
            padding: 18px 30px 18px 60px
        }

    .back::before {
        font-family: 'FontAwesome';
        content: "";
        position: absolute;
        left: 30px;
        display: block;
        top: 43px;
        font-size: 1.12rem;
        color: #ffc72c
    }

    .dropdown-menu > li > ul > li ul.left-submenu li.label-container a {
        color: #235ba8;
        font-weight: bold;
        text-transform: uppercase;
        display: block;
        padding: 29px 30px;
        line-height: 1;
        margin-bottom: 0;
        font-size: 1.12rem;
        font-weight: bold;
        background-color: #f1f1f1
    }

        .dropdown-menu > li > ul > li ul.left-submenu li.label-container a:focus {
            text-decoration: none
        }

    .back-menu-mobile ul {
        margin: 0;
        padding: 0 0 10px 0
    }

    .dropdown-menu > li > ul > li ul.left-submenu li a {
        display: block;
        padding: 18px 30px;
        clear: both;
        font-weight: normal;
        line-height: 1.29;
        font-size: 1rem;
        color: #235ba8;
        white-space: normal
    }

    body.body-background .navbar-light .navbar-toggler {
        background-color: #fff;
        position: fixed;
        z-index: 99
    }

    .navbar-toggler-right {
        right: 15px
    }

    body .navbar-light .navbar-toggler[aria-expanded="false"] {
        background-color: #235ba8
    }

    #heroCarousel {
    }

    .body-background .container {
        background-color: #fff
    }

    .navbar-container.on .mobile-nav-bg, .body-background .mobile-nav-overlay {
        background-color: rgba(1,1,1,.6);
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 98
    }

    .navbar-container.on .mobile-nav-bg {
        background-color: #fff;
        z-index: -1
    }

    .body-background .navbar-toggleable-md .navbar-nav .dropdown-menu {
        background-color: inherit
    }

    .body-background .login-widget-collapsed-inner {
        z-index: -9;
        position: absolute
    }

    .body-background li.has-submenu, .body-background li.no-submenu, .body-background .navbar-nav {
        border: 0 !important
    }

    .body-background .dropdown-menu > li > ul > li.has-submenu:after, .body-background .dropdown .mobile-dropdown::after {
        display: none
    }

    body.open-login-background .login-background-overlay {
        background-color: rgba(1,1,1,.5);
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0
    }

    .dropdown-menu > li {
        padding: initial;
        border-right: none
    }

    .map-footer-item {
        padding: 5px 0 5px 30px
    }

        .map-footer-item .map-icon:before {
            width: 20px;
            height: 20px;
            font-size: .625rem;
            line-height: 1.125rem;
            top: auto
        }
}

@media(max-width: 767px) {
    .dropdown .mobile-dropdown {
        position: relative
    }

        .dropdown .mobile-dropdown::after {
            font-family: 'FontAwesome';
            content: '';
            position: absolute;
            right: 25px;
            display: block;
            top: 22px;
            font-size: 14px
        }

    .dropdown.show .mobile-dropdown::after {
        content: ''
    }

    .left-submenu {
        -webkit-backface-visibility: hidden;
        width: 100%;
        top: 0;
        bottom: 0;
        position: fixed;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background: #fff;
        z-index: 1002;
        box-sizing: content-box;
        -webkit-overflow-scrolling: touch;
        -ms-transform: translate(-100%,0);
        -webkit-transform: translate3d(-100%,0,0);
        -moz-transform: translate3d(-100%,0,0);
        -ms-transform: translate3d(-100%,0,0);
        -o-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0);
        left: 0;
        -webkit-transition: -webkit-transform 500ms ease;
        -moz-transition: -moz-transform 500ms ease;
        -ms-transition: -ms-transform 500ms ease;
        -o-transition: -o-transform 500ms ease;
        transition: transform 500ms ease;
        border-top: 6px solid #235ba8
    }

        .left-submenu.move-right {
            -ms-transform: translate(0%,0);
            -webkit-transform: translate3d(0%,0,0);
            -moz-transform: translate3d(0%,0,0);
            -ms-transform: translate3d(0%,0,0);
            -o-transform: translate3d(0%,0,0);
            transform: translate3d(0%,0,0)
        }

    .dropdown-menu > li > ul > li.has-submenu > a, .dropdown-menu > li > ul > li .no-submenu > li a {
        font-size: .875rem;
        text-transform: uppercase;
        color: #235ba8;
        padding: 1.1rem 1.5rem
    }

    .dropdown-menu > li > ul > li.has-submenu {
        position: relative
    }

    .dropdown-menu > li > ul > li .left-submenu + .no-submenu {
        margin-top: 0
    }

    .dropdown-menu > li > ul > li.has-submenu > a, .dropdown-menu > li > ul > li .no-submenu {
        border-bottom: 1px solid #fff
    }

    .dropdown-menu > li > ul > li ul.left-submenu li a:hover {
        text-decoration: none
    }

    .dropdown-menu > li > ul > li.has-submenu > a:after {
        font-family: 'FontAwesome';
        content: '';
        position: absolute;
        right: 25px;
        display: block;
        top: 12px;
        font-size: 18px;
        color: #235ba8
    }

    .back-menu-mobile {
        display: block
    }

    .dropdown-menu > li > ul > li + .has-submenu {
        margin-top: 0
    }

    .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover, .mega-dropdown-menu > li > ul > li > a:focus, .mega-dropdown-menu > li > ul > li > a:hover {
        color: #235ba8
    }

    .dropdown.mega-dropdown.show .nav-link, .dropdown.show .nav-link {
        border-bottom: none !important
    }

    .body-background .notification-block {
        display: none
    }

    body.body-background {
        overflow: hidden;
        position: fixed
    }

    .dropdown-menu > li > ul > li ul.left-submenu li.back {
        position: relative;
        padding: 25.5px 0
    }

        .dropdown-menu > li > ul > li ul.left-submenu li.back a, .dropdown-menu > li > ul > li ul.left-submenu li.back button {
            color: #235ba8;
            text-transform: uppercase;
            padding-left: 60px;
            font-size: 1.14rem;
            font-weight: bold;
            border: 0;
            background: transparent;
            border: 0;
            background: transparent;
            display: block;
            padding: 18px 30px 18px 60px
        }

    .back::before {
        font-family: 'FontAwesome';
        content: "";
        position: absolute;
        left: 30px;
        display: block;
        top: 43px;
        font-size: 1.12rem;
        color: #ffc72c
    }

    .dropdown-menu > li > ul > li ul.left-submenu li.label-container a {
        color: #235ba8;
        font-weight: bold;
        text-transform: uppercase;
        display: block;
        padding: 28px 30px;
        margin-bottom: 0;
        line-height: 1;
        font-size: 1.12rem;
        font-weight: bold;
        background-color: #f1f1f1
    }

        .dropdown-menu > li > ul > li ul.left-submenu li.label-container a:focus {
            text-decoration: none
        }

    .back-menu-mobile ul {
        margin: 0;
        padding: 0 0 10px 0
    }

    .dropdown-menu > li > ul > li ul.left-submenu li a {
        display: block;
        padding: 18px 30px;
        clear: both;
        font-weight: normal;
        line-height: 1.29;
        font-size: 1rem;
        color: #235ba8;
        white-space: normal
    }

    body.body-background .navbar-light .navbar-toggler {
        background-color: #fff;
        position: fixed;
        z-index: 99
    }

    .navbar-toggler-right {
        right: 15px
    }

    body .navbar-light .navbar-toggler[aria-expanded="false"] {
        background-color: #235ba8
    }

    #heroCarousel {
    }

    .body-background .container {
        background-color: #fff
    }

    .body-background .mobile-nav-overlay {
        background-color: rgba(1,1,1,.7);
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 98
    }

    .body-background .navbar-toggleable-md .navbar-nav .dropdown-menu {
        background-color: inherit
    }

    .body-background .login-widget-collapsed-inner {
        z-index: -9;
        position: absolute
    }

    .body-background li.has-submenu, .body-background li.no-submenu, .body-background .navbar-nav, .body-background .navbar-light .navbar-nav .nav-link {
        border: 0 !important
    }

    .body-background .dropdown-menu > li > ul > li.has-submenu:after, .body-background .dropdown .mobile-dropdown::after {
        display: none
    }

    body.open-login-background .login-background-overlay {
        background-color: rgba(1,1,1,.5);
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0
    }

    .dropdown-menu > li {
        padding: initial;
        border-right: none
    }

    span.description {
        width: 35%
    }

    .outage-mode span.description {
        width: 30%
    }

    .outage-mode button {
        float: left
    }

    .outage-containte-header {
        float: left;
        width: 100%
    }

        .outage-containte-header a.refresh-link, .outage-containte-header span, .outage-containte-header .custom-control {
            float: left
        }

            .outage-containte-header .custom-control:last-child {
                margin-left: 0
            }

        .outage-containte-header a.refresh-link {
            font-size: 14px;
            margin-right: 20px;
            padding-left: 15px
        }

            .outage-containte-header a.refresh-link::before {
                left: 1px;
                top: 1px;
                font-size: 12px
            }

        .outage-containte-header span {
            font-size: 14px
        }

        .outage-containte-header .custom-control span {
            font-size: 16px
        }

        .outage-containte-header .custom-control {
            margin-right: 10px
        }

            .outage-containte-header .custom-control:last-child {
                margin-right: 0
            }

                .outage-containte-header .custom-control:last-child span.custom-control-description {
                    padding-right: 0
                }

            .outage-containte-header .custom-control .custom-control-indicator {
                height: 10px;
                width: 10px;
                top: 5px
            }

    #accordion {
        margin-top: 60px
    }

        #accordion .outage-title {
            top: -45px
        }

    .abs {
        position: relative
    }

    .user-address {
        float: left
    }

    .col-no-padding .col-sm-6 {
        padding-right: 15px;
        padding-left: 15px
    }

    .hidden-xs {
        display: none !important
    }

    .visible-xs {
        display: block !important
    }

    .item-placement {
        display: flex;
        flex-flow: column
    }

    .two {
        order: 2
    }

    .one {
        order: 1
    }

    .content-container .right-nav {
        margin-bottom: 20px
    }

    .content-container .back-to {
        margin-bottom: 20px
    }

    .meter-reading-user-container .d-block {
        font-size: 9px
    }

    .form-wizard .step-1.active.tab-pane {
        top: 50px
    }

    .form-wizard .step-2.active.tab-pane {
        top: 120px
    }

    .form-wizard .step-3.active.tab-pane {
        top: 190px
    }

    .form-wizard .step-4.active.tab-pane {
        top: 270px
    }

    .form-wizard .step-5.active.tab-pane {
        top: 330px
    }

    .form-wizard .step-6.active.tab-pane {
        top: 400px
    }

    .form-wizard .step-7.active.tab-pane {
        top: 470px
    }

    .form-wizard .step-8.active.tab-pane {
        top: 510px
    }

    .form-wizard .steps-list .step-li-1.active {
        min-height: 220px
    }

    .form-wizard .steps-list .step-li-2.active {
        min-height: 220px
    }

    .form-wizard .steps-list .step-li-3.active {
        min-height: 350px
    }

    .form-wizard .steps-list .step-li-4.active {
        min-height: 250px
    }

    .form-wizard .steps-list .step-li-5.active {
        min-height: 270px
    }

    .form-wizard .steps-list .step-li-6.active {
        min-height: 1050px
    }

    .form-wizard .steps-list .step-li-7.active {
        min-height: 570px
    }

    .form-wizard .steps-list .step-li-8.active {
        min-height: 220px
    }

    .map-footer-container {
        padding: 15px 10px;
        font-size: .75rem;
        -moz-column-count: 2;
        -moz-column-gap: 10px;
        -webkit-column-count: 2;
        -webkit-column-gap: 10px;
        column-count: 2;
        column-gap: 10px
    }

    .map-footer-item {
        padding: 7px 0 7px 30px
    }

        .map-footer-item .map-icon:before {
            width: 20px;
            height: 20px;
            font-size: .625rem;
            line-height: 1.125rem;
            top: auto
        }
}