.popup-outer { position: fixed; top: 50%; left: 50%; background: #fff; width: 440px; height: 340px; margin-left: -250px; margin-top: -250px; z-index: 99999; border: 1px solid #d2d2d2; padding: 10px; display: none;}

.popup-inner { padding: 30px; }

.popup-toolbar { height: 20px; text-align: right; font-size: 18pt; }

.popup-title { color: #808080; font-size: 38px; font-weight: 200; text-align: center; padding: 0 0 20px 0; border-bottom: 1px solid #d2d2d2; }

.popup-body { text-align: center; height: 210px; font-size: 14px; line-height: 1.5em; padding-top: 10px; }

.popup-input { font-size: 18px; text-align: center; border: 1px solid #d2d2d2; padding: 12px; background-color: #ffffff; color: #000; width: 80%; border-radius: 4px; margin-top: 18px; }

.popup-footer { padding-top: 10px; }

.overlay { position: fixed; top: 0; bottom: 0; background: #000; width: 100%; height: 100%; opacity: 0.6; z-index: 99998; display: none; }

.close { cursor: pointer; }

.popup-btn { padding: 12px 80px; margin-top: 18px; }
.popup-btn:hover { color: #e6e6e6; }

@media only screen and (min-device-width: 360px) and (max-device-width: 640px) {
    .popup-outer { position: fixed; margin: 0; bottom: 0; width: 100%; height: 250px; left: -15px; top: initial; }

    .popup-toolbar { height: 10px }

    .popup-title { font-size: 30px; padding: 0 0 16px 0;}

    .popup-body { height: 210px; font-size: 14px; line-height: 1.3em; }

    .popup-input { font-size: 16px; padding: 10px; margin-top: 14px; }

    .overlay { background: none; width: 0; height: 0; }

    .popup-inner { padding: 10px 24px 24px 24px }

    .popup-footer { padding-top: 4px; }

    .popup-btn { padding: 8px 50px; font-size: 12px; margin-top: 14px}
}

/*@media only screen and (min-device-width: 300px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) {*/
@media only screen and (min-device-width: 300px) and (max-device-width: 480px) {
    .popup-outer { position: fixed; top: 42px; margin: 0; width: 100%; height: 245px; left: -15px;  }

    .popup-toolbar { height: 2px }

    .popup-title { font-size: 20px; padding: 0 0 14px  0;}

    .popup-body { height: 210px; font-size: 13px; line-height: 1.3em; }

    .overlay {background: none;width: 0;height: 0;}

    .popup-inner { padding: 10px 20px 10px 20px }

    .popup-input { font-size: 14px; padding: 8px;  margin-top: 8px; }
    
    .popup-footer { padding-top: 4px; }

    .popup-btn { padding: 4px 30px; font-size: 12px; margin-top: 8px}
}