/*
 *  help_popup.css
 *  Extracted from alertpopup.inc.source.php (FlyingSkySeeds LLC)
 *  Only the styles needed for: popAlert, popAsyncTimer, CloseTimer, popQuickMsg
 */

.lfloat{float:left}
.rfloat{float:right}

.alertclearfix:after {visibility:hidden;display:block;font-size:0;content:".";clear:both;line-height:0;height:0;}
.alertclearfix {display:inline-block;zoom:1}


/* --- Alert overlay --- */
#alertOverlayID{display:none;position:fixed;_position:absolute;z-index:221;}
#AsyncTimerOverlayID{display:none;position:fixed;_position:absolute;z-index:231;}
/*  ⚠️ MUST sit above #alertShade (220), and MUST be `fixed`, exactly like
    #alertOverlayID. Without this rule the dialog inherits .alert_frame, which
    has no z-index and is position:absolute — so the 50%-opacity shade paints
    straight over the top of it. The dialog is complete and interactive, it just
    looks greyed out like the page behind it, which reads as "broken styling"
    rather than "wrong stacking order". */
#choiceOverlayID{display:none;position:fixed;_position:absolute;z-index:221;}

.alert_frame{position:absolute;_position:absolute;top:0;left:0;max-width:445px;}
.alert_frame div.alert_border{border:1px solid black;box-shadow:0 0 6px #888;width:inherit;}
.alert_frame div.alert_container{margin:0 auto;text-align:left;background:#fff;width:100%;}
.alert_container div.alert_capsule{position:relative;top:0;left:0;width:100%;}

.alert_capsule div.alert_header{display:block;width:inherit;min-height:35px;color:#fff;background-color:var(--help-primary, #0A2540);}
.alert_header div.alert_top{padding:9px 16px;}
.alert_top div.alert_title{font-size:15px;font-weight:700;}

.alert_capsule div.alert_message{display:block;min-height:2em;margin:0 16px 10px;}
.alert_message div.alert_message_wrapper{padding:10px 0 0;}
.alert_message_wrapper div.alert_message_row{font-size:15px;line-height:1.5em;padding:0 0 3px;}

.alert_capsule div.alertbutton_row{position:relative;top:0;left:0;padding:12px 0 15px;min-height:30px;width:100%;}
.alertbutton_row p.alert_errorcode{position:absolute;top:15px;left:15px;font-size:12px;font-style:italic;font-weight:300;color:#888;}
.alertbutton_row div.abutton_wrapper{padding-right:15px;margin-bottom:5px;}


/* --- Alert buttons --- */
input[type=button].alert_pillbutton{
	display:inline-block;
	text-transform:uppercase;
	font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	font-size:1rem;
	font-weight:100;
	line-height:normal;
	min-width:100px;
	text-align:center;
	border-radius:2rem;
	border:1px solid;
	padding:.4rem 15px;
	text-decoration:none;
	vertical-align:middle;
	white-space:nowrap;
	-webkit-appearance:none;
	appearance:none;
	outline:none;
	transition:all .3s;
	cursor:pointer;
}

.alert_pilloutline{background-color:#fff;color:var(--help-primary, #0A2540);border-color:var(--help-primary, #0A2540);}
.alert_pilloutline:hover{background-color:var(--help-accent, #2B7BE9);color:#fff;}
.alert_pilloutline:active{background-color:var(--help-accent, #2B7BE9);color:#fff;}

/*  Input for popPrompt, and a danger variant for popChoice. Both follow the
    existing pill/overlay vocabulary so a host that themed this module gets them
    themed too — nothing new to port.
    ⚠️ 16px on the input, not a rem fraction: iOS zooms the viewport on any
    focused field under 16px and does not zoom back. */
.choice_inputwrap{padding:4px 0 2px;}
.choice_input{width:100%;box-sizing:border-box;padding:9px 12px;font-family:inherit;font-size:16px;
              border:1px solid var(--help-border, #CFD6E6);border-radius:6px;color:var(--color-text, #1E293B);}
.choice_input:focus{outline:none;border-color:var(--help-accent, #2B7BE9);}
.alert_pilldanger{background-color:#B91C1C;border-color:#B91C1C;color:#fff;}
.alert_pilldanger:hover{background-color:#991B1B;border-color:#991B1B;color:#fff;}
.alertbutton_row div.abutton_wrapper input.alert_pillbutton{margin-left:8px;}

.alert_pillgreen{background-color:var(--help-primary, #0A2540);border-color:var(--help-primary, #0A2540);color:#fff;}
.alert_pillgreen:hover{background-color:var(--help-primary-hover, #1D6AD8);border-color:var(--help-primary-hover, #1D6AD8);color:#fff;}
.alert_pillgreen:active{background-color:var(--help-accent, #2B7BE9);border-color:var(--help-accent, #2B7BE9);color:#fff;}


/* --- Async timer --- */
.alert_frame div.spin_container{position:relative;top:0;left:0;background:transparent;}
.spin_container div.spinoverlay{position:absolute;top:36px;left:160px;}
.spin_container p.spinmessage{position:absolute;bottom:0;left:0;width:inherit;padding:2px;text-align:center;font-weight:700;color:var(--help-primary, #0A2540);}

.alert_frame div.asynctimer_container{display:block;margin:0 auto;text-align:center;background:#fff;border:1px solid black;}
.asynctimer_container div.header{display:block;color:#fff;background-color:var(--help-primary, #0A2540);padding:9px 16px;font-size:13px;font-weight:700;}
.asynctimer_container div.message{position:relative;display:block;padding-top:15px;}
.asynctimer_container div.message p.asynctimermessage{position:relative;display:block;padding:0;margin:0 10px 10px 16px;font-size:13px;font-weight:300;text-align:center;}
.asynctimer_container div.message div.progress_row{position:relative;display:block;margin:0 auto;text-align:center;}
.progress_row #progressind{display:block;height:24px;width:24px;margin:0 0 15px;}


/* --- Shades --- */
#alertShade{display:none;z-index:220;position:fixed;opacity:0.5;height:9999px;width:100%;top:0;left:0;background:#F5F5F5;}
#timerShade{display:none;z-index:230;position:fixed;opacity:0.5;height:9999px;width:100%;top:0;left:0;background:#F5F5F5;}


/* --- Ball spinner animation --- */
@keyframes ball-spin-fade-loader {
  50% { opacity:0.3; transform:scale(0.4); }
  100% { opacity:1; transform:scale(1); }
}

.ball-spin-fade-loader{position:relative;}
.ball-spin-fade-loader > div{
	background-color:var(--help-primary, #0A2540);
	width:15px;height:15px;border-radius:100%;margin:2px;
	animation-fill-mode:both;position:absolute;
}
.ball-spin-fade-loader > div:nth-child(1){top:25px;left:0;animation:ball-spin-fade-loader 1s 0s infinite linear;}
.ball-spin-fade-loader > div:nth-child(2){top:17.045px;left:17.045px;animation:ball-spin-fade-loader 1s .12s infinite linear;}
.ball-spin-fade-loader > div:nth-child(3){top:0;left:25px;animation:ball-spin-fade-loader 1s .24s infinite linear;}
.ball-spin-fade-loader > div:nth-child(4){top:-17.045px;left:17.045px;animation:ball-spin-fade-loader 1s .36s infinite linear;}
.ball-spin-fade-loader > div:nth-child(5){top:-25px;left:0;animation:ball-spin-fade-loader 1s .48s infinite linear;}
.ball-spin-fade-loader > div:nth-child(6){top:-17.045px;left:-17.045px;animation:ball-spin-fade-loader 1s .6s infinite linear;}
.ball-spin-fade-loader > div:nth-child(7){top:0;left:-25px;animation:ball-spin-fade-loader 1s .72s infinite linear;}
.ball-spin-fade-loader > div:nth-child(8){top:17.045px;left:-17.045px;animation:ball-spin-fade-loader 1s .84s infinite linear;}


/* --- CSS spinner --- */
@keyframes alert_fss_spinner { to { transform:rotate(360deg); } }

.alert_fss_spinner:before{
	content:'';box-sizing:border-box;position:absolute;
	top:50%;left:50%;border-radius:50%;
	animation:alert_fss_spinner .6s linear infinite;
}
.alert_spinner24:before{
	width:20px;height:20px;margin-top:-10px;margin-left:-10px;
	border:4px solid var(--help-primary, #0A2540);
	border-top-color:#fff;background-color:#fff;
}


/* --- popQuickMsg --- */
.popquickmessage{
	display:none;position:absolute;
	background-color:#16A34A;color:#fff;
	border-radius:6px;
	cursor:default;z-index:999;
}
.popquickmessage p{margin:0;padding:8px 10px;font-size:11px;font-weight:600;line-height:15px;}


/* --- bounceIn animation (used by popQuickMsg) --- */
.animated{animation-duration:1s;animation-fill-mode:both;}
.animatedfast{animation-duration:.5s;animation-fill-mode:both;}
.animated.bounceIn{animation-duration:.75s;}

@keyframes bounceIn {
  from,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);}
  0%{opacity:0;transform:scale3d(.3,.3,.3);}
  20%{transform:scale3d(1.1,1.1,1.1);}
  40%{transform:scale3d(.9,.9,.9);}
  60%{opacity:1;transform:scale3d(1.03,1.03,1.03);}
  80%{transform:scale3d(.97,.97,.97);}
  to{opacity:1;transform:scale3d(1,1,1);}
}
.bounceIn{animation-name:bounceIn;}

@keyframes zoomOut {
  from{opacity:1;}
  50%{opacity:0;transform:scale3d(.3,.3,.3);}
  to{opacity:0;}
}
.zoomOut{animation-name:zoomOut;}