/* 7tag flow -- flow-a.css  (Mode A: dual Chrome CRX + Firefox XPI)
 * Modal DOM this styles is injected per page inside the 7tag-flow modal blocks.
 * Covers: #lightbox, #arrow-modal(+step2), .box/.boxStep2, #closeHelp,
 *         #countdownModal/.msModule (the CRX interstitial).
 */
#lightbox {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,.7);
  text-align: center;
  z-index: 1000;
}
#arrow-modal,
#arrow-modal-step2 {
  display: none;
  position: fixed;
  z-index: 100502;
  top: 285px;
  width: max-content;
}
#arrow-modal-step2 { left: 450px; }
#arrow-modal-pointer {
  display: block;
  z-index: 100502;
  position: absolute;
  animation: bounce 1.5s infinite;
  top: -90px;
}
#arrow-modal-pointer-step2 {
  display: block;
  z-index: 100502;
  position: absolute;
  animation: bounce 1.5s infinite;
  top: -90px;
  left: 150px;
}
.box, .boxStep2 {
  position: relative;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  width: 100%;
  display: flex;
  border: 2px solid #a6abb3;
  justify-content: center;
  align-items: center;
  padding: 16px;
  box-shadow: 8px 12px 17px -5px rgba(0,0,0,0.58);
  border-radius: 5px;
  background: white;
  min-width: 360px;
}
.box img, .boxStep2 img { width: 18%; padding: 0 15px 0 0; z-index: 100503; max-width: 55px; }
.box ol, .boxStep2 ol {
  width: 80%; margin: 0; padding: 0 0 0 24px;
  border-left: 2px solid #e1e2e6;
  font-size: 16px; z-index: 100503; color: #4f5769; text-align: left;
}
.box ol span, .boxStep2 ol span { font-weight: bold; }
.box .copy, .boxStep2 .copy { width: 80%; border-left: 2px solid #e1e2e6; z-index: 100503; }
.box h1, .boxStep2 h1 { font-size: 24px; text-align: center; color: #4f5769; padding: 0 0 8px 0; margin: 0; }
.box p, .boxStep2 p { font-size: 14px; text-align: center; color: #0164ba; padding: 0; margin: 0; }
#closeHelp {
  display: block; position: absolute; right: 8px; top: 2px;
  box-sizing: border-box; font-size: 16px; opacity: 0.5; cursor: pointer;
}
@keyframes bounce {
  0%,20%,50%,80%,100% { -webkit-transform: translateY(0); }
  40% { -webkit-transform: translateY(-20px); }
  60% { -webkit-transform: translateY(-5px); }
}
.box p, .boxStep2 p { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; margin: 0 !important; }
.box h1, .boxStep2 h1 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; margin: 0 !important; }
.box ol { margin: 0 !important; }
.box ol li { margin: 0 !important; }
.box.arrow-modal-top > img, .box.arrow-modal-top img:first-child { width: 50px; height: 50px; object-fit: contain; flex-shrink: 0; }
#countdownModal {
  font-family: "Roboto", sans-serif;
  display: none; position: absolute;
  top: 50%; left: 50%;
  width: 600px; z-index: 10000000;
  height: auto; padding: 70px 0;
  background-color: #fff; border-radius: 5px;
  transform: translate(-50%, -50%);
  color: #fff;
}
.msModule .copy {
  display: block; font-size: 35px !important;
  margin: 0 auto !important; width: 90% !important;
  text-align: center !important; padding-top: 45px; color: #000;
}
.msModule .ms-loading { display: none; margin: 0 auto; width: 100px; position: absolute; top: 120px; left: 50%; margin-left: -50px; }
.msModule .ico { display: block; margin: 0 auto; width: 70px; padding-top: 10px; }