/*
 *  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;}

.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;}

.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:var(--help-accent, #2B7BE9);color:#fff;
	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;}
