﻿

/*================================
=             Popup              =
================================*/

.popup {
    background: #fff;
    position: relative;
    max-width: 100%;
}

.popup-close-btn {
    cursor: pointer;
    position: absolute;
    top: -22px;
    right: -22px;
    z-index: 10000;
    font-size: 20px;
    background: none;
}

.popup .popup__required:after {
    content: "*";
}

.popup__invalid {
    color:red;
}

.popup__message {
    font-size:1.1em;
    text-align:center;
    display: none;
}

.popup__invalid,
.popup__desktop-html,
.popup__mobile-html,
.popup__mobile-email .emailaddress-label,
.popup__mobile-email .form-buttons {
    display: none;
}

/* MOBILE ONLY */
.popup__mobile-html {
    width: 100%;
    position: fixed;
    bottom: -100em;
    padding: .5em;
    background-color: #fff;
    box-shadow: 1px 0 5px #444;
    z-index: 99999;
}

    .popup__mobile-html .popup-close-btn {
        top: 0;
        right: .5em;
    }

    .popup__mobile-html > div {
        padding-top: .4em;
        text-align: center;
    }

    .popup__mobile-html .popup__mobile-heading {
        font-weight: bold;
        padding: 0 1.5em;
        font-size: 1.1em;
    }

.popup__mobile-email {
    width: 16.875em;
    margin: auto;
}

    .popup__mobile-email .emailaddress-textbox {
        font-size: .9em;
        width: 16em;
        padding: 0.06945em .25em;
        margin-top: 0.1111em;
        float: left;
        border: 1px solid #808080;
        height: 2.500em;
        color: #444;
    }

    .popup__mobile-email .fdn-validator-text {
        color: #ff0000;
        font-size: .9em;
    }

    .popup__mobile-email .popup__form .popup__mobile-btn {
        border: 1px solid #808080;
        border-left: none;
        background-color: #fff;
        padding: 0.1em .5em 0.03128em .5em;
        float: left;
        margin-top: .1em;
        height: 2.250em;
        color: #808080;
    }

    .popup__mobile-email .popup__form > span {
        clear: both;
    }

    .popup__mobile-email .popup__form > div:first-child {
        float: left;
    }

.popup__mobile-html .popup__mobile-disclaimer {
    font-size: .9em;
    padding-top: .4em;
    text-align: center;
    clear: left;
}