/*
 * i-Light SO Countdown Popup Mobile SAFE v1.1.0
 * Scoped to the SO Countdown popup and small screens only.
 */

@media (max-width: 1024px) {
  body.ilight-countdown-popup-open {
    overflow: hidden !important;
  }

  body.ilight-countdown-popup-open > .modal-backdrop {
    z-index: 2147483000 !important;
  }

  body.ilight-countdown-popup-open > .modal-backdrop.in,
  body.ilight-countdown-popup-open > .modal-backdrop.show {
    display: block !important;
    visibility: visible !important;
    opacity: 0.55 !important;
    filter: alpha(opacity=55) !important;
  }

  body > #so_popup_countdown {
    z-index: 2147483010 !important;
    box-sizing: border-box !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  body > #so_popup_countdown.in,
  body > #so_popup_countdown.show,
  body > #so_popup_countdown[aria-hidden="false"],
  body > #so_popup_countdown[data-ilight-popup-open="1"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body > #so_popup_countdown .modal-dialog {
    box-sizing: border-box !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: calc(100vw - 24px) !important;
    max-width: 640px !important;
    height: auto !important;
    max-height: none !important;
    margin: 12px auto !important;
    padding: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    background: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.28) !important;
  }

  body > #so_popup_countdown .modal-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    box-sizing: border-box !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 13px 58px 12px 16px !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  }

  body > #so_popup_countdown .modal-header h1,
  body > #so_popup_countdown .modal-header h2,
  body > #so_popup_countdown .modal-header h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 28px !important;
  }

  body > #so_popup_countdown .modal-header .close {
    position: absolute !important;
    top: 5px !important;
    right: 7px !important;
    z-index: 7 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #222 !important;
    font-size: 30px !important;
    line-height: 1 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    background: transparent !important;
    border: 0 !important;
  }

  body > #so_popup_countdown .modal-content {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: none !important;
  }

  body > #so_popup_countdown .modal-content > * {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  body > #so_popup_countdown .modal-content img,
  body > #so_popup_countdown .modal-content video {
    max-width: 100% !important;
    height: auto !important;
  }

  body > #so_popup_countdown .modal-content iframe {
    max-width: 100% !important;
  }
}