/* Customizations for EnergySage zip code entry form used in Popup Maker forms (below) */

.l-zip-popup {
    margin: 0 auto 20px;
    text-align: center;
}

.l-zip-popup .control-group {
    margin-bottom: 5px;
    position: relative;
}

.l-zip-popup .control-label {
    display: none;
}

.l-zip-popup .controls,
.l-zip-popup .m-button {
    display: block;
    margin: 0 auto;
    width: 220px;
}

.l-zip-popup .help-block {
    bottom: 41px;
    right: 50%;
    margin: 0 -110px 0 0;
    padding: 0;
    position: absolute;
    width: 220px;
}

/*
 * TODO: I used these brittle internal popup IDs because I can't find a
 * way to target a specific modal with a custom ID or class. That might
 * be a paid feature of Popup Maker. And the close button is inserted
 * outside the parent class in our markup.
 */

/* Solar Prices popup */

#popmake-4196.pum-container {
    font-size: 14px;
    margin-bottom: 0;
    padding: 35px 20px 15px;
}

#popmake-4196 .popmake-close {
    font-size: 26px;
    line-height: 1;
    right: 3px;
    top: 5px;
}

#popmake-4196 .popmake-close:hover {
    color: #949494 !important;
}

.popup-prices .popup-prices__content {
    line-height: 1.4;
    margin: 0 auto 1.75em;
    max-width: 380px;
    text-align: center;
}

.popup-prices .popup-prices__content .m-title {
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 1em;
}

.popup-prices .popup-prices__content .m-subtitle {
    font-family: "Arvo", Georgia, "Times New Roman", Times, serif;
    font-size: 15px;
    margin-bottom: 1em;
}

.popup-prices .popup-prices__content p {
    font-size: 14px;
    margin-bottom: 1em;
}

.popup-prices .popup-prices__content2 {
    margin-bottom: 0;
}

.popup-prices .popup-prices__privacy-lock {
    align-items: center;
    display: flex;
    font-size: 14px;
    justify-content: center;
    margin-bottom: 2.5em;
}

.popup-prices .popup-prices__privacy-lock img {
    margin-right: 10px;
}

.popup-prices .popup-prices__not-now {
    color: #bababa;
    font-family: "Arvo", Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
}

.popup-prices .popup-prices__not-now a {
    color: #bababa;
}

.popup-prices .popup-prices__not-now a:hover {
    color: #949494;
}

@media screen and (min-width: 635px) {
    #popmake-4196.pum-container {
        width: 600px;
    }

    .popup-prices .popup-prices__content .m-title {
        font-size: 26px;
        line-height: 1.33;
        margin-bottom: 0.75em;
    }

    .popup-prices .popup-prices__content {
        max-width: 450px;
    }

    .popup-prices .popup-prices__content .m-subtitle {
        font-size: 16px;
    }
}

/* END Solar Prices popup */

/* Urgency Messaging popup */

#popmake-20469.pum-container {
    font-size: 14px;
    margin-bottom: 0;
}

#popmake-20469 .popmake-close {
    color: #dddddd;
    font-size: 20px;
    line-height: 1;
    right: 5px;
    top: 5px;
}

#popmake-20469 .popmake-close:hover {
    color: #bbbbbb !important;
}

.um-popup .um-popup__header {
    background: rgb(0,160,223);
    background: linear-gradient(90deg, rgba(0,160,223,1) 0%, rgba(0,121,239,1) 100%);
    border-radius: 5px 5px 0 0;
    height: 73px;
}

.um-popup .um-popup__alert {
    align-items: center;
    background-color: #f3f3f3;
    border: 3px solid white;
    border-radius: 50%;
    display: flex;
    height: 78px;
    justify-content: center;
    margin: -38px auto 1em;
    width: 78px;
}

.um-popup .um-popup__alert .icon-alert {
    height: 45px;
    margin: -6px 0 0 1px;
    width: 45px;
}

.um-popup .um-popup__content {
    line-height: 1.4;
    margin: 0 auto 1.75em;
    max-width: 380px;
    padding: 0 20px;
    text-align: center;
}

.um-popup .um-popup__content .m-title {
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 0.25em;
}

.um-popup .um-popup__content .m-subtitle {
    font-family: "Arvo", Georgia, "Times New Roman", Times, serif;
    font-size: 14px;
    margin-bottom: 1em;
}

.um-popup .um-popup__content p {
    font-size: 14px;
    margin-bottom: 1em;
}

.um-popup .l-zip-popup {
    margin-bottom: 30px;
}

@media screen and (min-width: 635px) {
    #popmake-20469.pum-container {
        width: 600px;
    }

    .um-popup .um-popup__header {
        height: 113px;
    }

    .um-popup .um-popup__alert {
        border: 4px solid white;
        border-radius: 50%;
        height: 156px;
        margin: -84px auto 1.25em;
        width: 156px;
    }    

    .um-popup .um-popup__alert .icon-alert {
        height: 85px;
        margin: -8px 0 0 1px;
        width: 85px;
    }

    .um-popup .um-popup__content {
        max-width: 450px;
        padding: 0;
    }
    
    .um-popup .um-popup__content .m-title {
        font-size: 24px;
        line-height: 1.33;
        margin-bottom: 0.25em;
    }

    .um-popup .um-popup__content .m-subtitle {
        margin-bottom: 1.25em;
    }
}

/* END Urgency Messaging popup */

/* Urgency Messaging footer */

#popmake-20475.pum-container {
    font-size: 16px;
    margin-bottom: 0;
}

#popmake-20475 .popmake-content + .popmake-close {
    display: none;
}

.um-footer {
    background-color: #2A5CAA;
    border-top: 1px solid #999999;
}

.um-footer .container {
    margin: 0 auto;
    padding-top: 0.5em;
    padding-bottom: 2em;
    width: 304px;
}

/* change to horizontal layout in portrait */
.um-footer .l-zip-entry {
    display: flex;
    margin: 0 auto;
    text-align: left;
    width: 304px;
}

.um-footer .l-zip-entry .control-group {
    margin: 0;
}

.um-footer .l-zip-entry .controls {
    margin: 0 14px 0 0;
    width: 150px;
}

.um-footer .l-zip-entry .control-label {
    display: none;
}

.um-footer .l-zip-entry .help-block {
    bottom: 74px;
    position: absolute;
    text-align: center;
    width: 150px;
}

.um-footer .l-zip-entry .m-button {
    width: 140px;
}

.um-footer .um-footer__dismiss {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.25em;
    user-select: none;
}

.um-footer .um-footer__dismiss button.btn-close {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: #dddddd;
    cursor: pointer;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 30px;
    line-height: 1;
    outline: none;
    padding: 0;
}

.um-footer .um-footer__dismiss button.btn-close:hover {
    color: #c3c3c3;
}

.um-footer .um-footer__dismiss button.btn-close:active {
    color: #aaaaaa;
}

.um-footer .um-footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5em;
}

.um-footer .um-footer__top .m-title {
    color: white;
    font-family: Arvo, Georgia, 'Times New Roman', Times, sans-serif;
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 0.05px;
    line-height: 1.2;
    margin: 0 0 0.5em;
    padding: 0;
    text-transform: none;
}

.um-footer .um-footer__top .m-subtitle {
    color: #dddddd;
    font-family: Arvo, Georgia, 'Times New Roman', Times, sans-serif;
    font-size: 16px;
    margin-bottom: 0.75em;
}

.um-footer .um-footer__top .svg-alert {
    width: 85px;
}

.um-footer .um-footer__top .icon-alert {
    height: 62px;
    width: 69px;
}

.um-footer .um-footer__top .icon-alert-fill {
    fill: white;
}

/* END portrait */

@media screen and (min-width: 480px) {    
    .um-footer .container {
        width: 456px;
    }

    .um-footer .l-zip-entry {
        justify-content: flex-start;
        width: 456px;
    }

    .um-footer .l-zip-entry .controls {
        margin-right: 18px;
        width: 219px;
    }

    .um-footer .l-zip-entry .help-block {
        width: 219px;
    }

    .um-footer .l-zip-entry .m-button {
        width: 219px;
    }

    .um-footer .um-footer__top .svg-alert {
        width: 135px;
    }
} /* END landscape */

@media screen and (min-width: 960px) {
    .um-footer .container {
        padding-bottom: 1.75em;
        width: 960px;
    }

    .um-footer .l-zip-entry .help-block {
        bottom: 90px;
    }

    .um-footer .um-footer__content {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .um-footer .um-footer__top {
        margin-bottom: 0;
    }

    .um-footer .um-footer__top .svg-alert {
        margin-right: 25px;
        width: auto;
    }

    .um-footer .um-footer__top .svg-alert .icon-alert {
        height: 78px;
        width: 87px;
    }

    .um-footer .um-footer__top-left {
        order: 2;
    }
} /* END desktop */

/* END Urgency Messaging footer */

/* Urgency Messaging slide-in */

#popmake-7180.pum-container {
    font-size: 16px;
    margin-bottom: 0;
}

#popmake-7180 .popmake-content + .popmake-close {
    display: none;
}

.um-slidein {
    background-color: #00a0df;
    padding: 0.5em 8px 2em;
    width: 320px;
}

/* change to horizontal layout in portrait */
.um-slidein .l-zip-entry {
    display: flex;
    margin: 0 auto;
    text-align: left;
    width: 304px;
}

.um-slidein .l-zip-entry .control-group {
    margin: 0;
}

.um-slidein .l-zip-entry .controls {
    margin: 0 14px 0 0;
    width: 150px;
}

.um-slidein .l-zip-entry .control-label {
    display: none;
}

.um-slidein .l-zip-entry .help-block {
    bottom: 74px;
    position: absolute;
    text-align: center;
    width: 150px;
}

.um-slidein .l-zip-entry .m-button {
    width: 140px;
}

.um-slidein .um-slidein__dismiss {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.25em;
    user-select: none;
}

.um-slidein .um-slidein__dismiss button.btn-close {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: #dddddd;
    cursor: pointer;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 30px;
    line-height: 1;
    outline: none;
    padding: 0;
}

.um-slidein .um-slidein__dismiss button.btn-close:hover {
    color: #c3c3c3;
}

.um-slidein .um-slidein__dismiss button.btn-close:active {
    color: #aaaaaa;
}

.um-slidein .um-slidein__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5em;
}

.um-slidein .um-slidein__top .m-title {
    color: white;
    font-family: Arvo, Georgia, 'Times New Roman', Times, sans-serif;
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 0.05px;
    line-height: 1.2;
    margin: 0 0 0.5em;
    padding: 0;
    text-transform: none;
}

.um-slidein .um-slidein__top .m-subtitle {
    color: #dddddd;
    font-family: Arvo, Georgia, 'Times New Roman', Times, sans-serif;
    font-size: 16px;
    margin-bottom: 0.75em;
}

.um-slidein .um-slidein__top .svg-alert {
    width: 85px;
}

.um-slidein .um-slidein__top .icon-alert {
    height: 62px;
    width: 69px;
}

.um-slidein .um-slidein__top .icon-alert-fill {
    fill: white;
}
/* END portrait */

@media screen and (min-width: 480px) {
    .um-slidein {
        padding-left: 25px;
        padding-right: 20px;
        width: 465px;    
    }

    .um-slidein .l-zip-entry {
        margin: 0;
        width: 352px;
    }

    .um-slidein .l-zip-entry .controls {
        margin-right: 18px;
        width: 167px;
    }

    .um-slidein .l-zip-entry .help-block {
        margin-right: -75px;
        width: 167px;
    }

    .um-slidein .l-zip-entry .m-button {
        width: 167px;
    }

    .um-slidein .um-slidein__top .svg-alert {
        width: 135px;
    }
} /* END landscape */

@media screen and (min-width: 740px) {
    .um-slidein .l-zip-entry .controls {
        padding: 0;
    }

    .um-slidein .l-zip-entry .help-block {
        margin-right: 8px;
    }
} /* END tablet */

@media screen and (min-width: 960px) {
} /* END desktop */

/* END Urgency Messaging slide-in */

/* HubSpot form styles
 *
 * The bulk of the styling comes from hubspot.scss in es-site, which is
 * <link>'d in header.php after this file. To opt-in to the styles, add the
 * 'hbspt-form-es' class to a container <div>. See es-site for examples.
 */

.hs-form-subscribe .hs-form-field {
    float: left;
    margin: 0 5px 0 0;
}

/* END HubSpot form styles */

/*
 * Popup Maker overrides applied to all of our popups
 * (Assuming "ES" theme)
 */

.pum-container .pum-content>:first-child {
    margin-top: auto;
}

.pum-container .pum-content>:last-child,
.pum-form__message:last-child {
    margin-bottom: auto;
}

.popmake-close:focus {
    outline: unset;
}

/* END Popup Maker overrides */