/*
ASN Login Site
Slapped together by Hal Nesbitt
*/

@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Book.eot');
    src: url('fonts/Gotham-Book.eot?iefix') format('embedded-opentype'),
         url('fonts/Gotham-Book.woff') format('woff'),
	 url('fonts/Gotham-Book.otf') format('opentype'),
         url('fonts/Gotham-Book.ttf') format('truetype'),
         url('fonts/Gotham-Book.svg#Gotham-Book') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SegoeUI';
    src: url('fonts/segoeui.eot');
    src: url('fonts/segoeui?iefix') format('embedded-opentype'),
         url('fonts/segoeui.woff') format('woff'),
	 url('fonts/segoeui.otf') format('opentype'),
         url('fonts/segoeui.ttf') format('truetype'),
         url('fonts/segoeui.svg#SegoeUI') format('svg');
    font-weight: normal;
    font-style: normal;

}


body{
	font-family: 'SegoeUI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.m0 { margin:0 !important; }
.mb0 { margin-bottom:0 !important; }
.mt0 { margin-top: 0 !important; }

.mb5 { margin-bottom:5px !important; }
.mb10 { margin-bottom:10px !important; }
.mb15 { margin-bottom:15px !important; }
.mb16 { margin-bottom:16px !important; }
.mb17 { margin-bottom:17px !important; }
.mb18 { margin-bottom:18px !important; }
.mb19 { margin-bottom:19px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom:30px !important; }
.mb40 { margin-bottom:40px !important; }
.mb50 { margin-bottom:50px !important; }
.mb60 { margin-bottom: 60px !important; }
.mb70 { margin-bottom: 70px !important; }
.mb80 { margin-bottom: 80px !important; }
.mb90 { margin-bottom: 90px !important; }
.mb100 { margin-bottom: 100px !important; }
.mb110 { margin-bottom: 110px !important; }
.mb120 { margin-bottom: 120px !important; }
.mb130 { margin-bottom: 130px !important; }
.mb140 { margin-bottom: 140px !important; }
.mb150 { margin-bottom: 150px !important; }
.mb160 { margin-bottom: 160px !important; }

.mt-15 { margin-top:-15px !important; }
.mt-10 { margin-top:-10px !important; }
.mt-5 { margin-top:-5px !important; }
.mt5 { margin-top:5px !important; }
.mt10 { margin-top:10px !important; }
.mt15 { margin-top:15px !important; }
.mt20 { margin-top:20px !important; }
.mt30 { margin-top:30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }
.mt60 { margin-top: 60px !important; }
.mt70 { margin-top: 70px !important; }
.mt80 { margin-top: 80px !important; }
.mt90 { margin-top: 90px !important; }
.mt100 { margin-top: 100px !important; }
.mt110 { margin-top: 110px !important; }
.mt120 { margin-top: 120px !important; }

.mr5 {  margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr25 { margin-right: 25px !important; }
.mr30 { margin-right: 30px !important; }
.mr40 { margin-right: 40px !important; }
.mr50 { margin-right: 50px !important; }
.mr60 { margin-right: 60px !important; }
.mr70 { margin-right: 70px !important; }
.mr80 { margin-right: 80px !important; }

.ml5 {  margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml25 { margin-left: 25px !important; }
.ml30 { margin-left: 30px !important; }
.ml40 { margin-left: 40px !important; }
.ml45 { margin-left: 45px !important; }
.ml50 { margin-left: 50px !important; }
.ml60 { margin-left: 60px !important; }
.ml70 { margin-left: 70px !important; }
.ml80 { margin-left: 80px !important; }

.p0 { padding: 0 !important; }
.pb0 { padding-bottom: 0 !important; }
.pb1 { padding-bottom: 1px !important; }
.pb2 { padding-bottom: 2px !important; }
.pb5 { padding-bottom: 5px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb15 { padding-bottom: 15px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb50 { padding-bottom: 60px !important; }
.pb80 { padding-bottom: 80px !important; }
.pb90 { padding-bottom: 90px !important; }
.pb100 { padding-bottom: 100px !important; }
.pt0 { padding-top: 0 !important; }
.pt10 { padding-top: 10px !important; }
.pt13 { padding-top: 13px !important; }
.pt20 { padding-top: 20px !important; }
.pt30 { padding-top: 30px !important; }
.pt40 { padding-top: 40px !important; }
.pt60 { padding-top: 60px !important; }
.pt80 { padding-top: 80px !important; }
.pt90 { padding-top: 90px !important; }
.pt100 { padding-top: 100px !important; }
.pt110 { padding-top: 110px !important; }
.pt120 { padding-top: 120px !important; }

.pr0 { padding-right: 0 !important; }
.pr20 { padding-right: 20px !important; }
.pr40 { padding-right: 40px !important; }
.pr60 { padding-right: 60px !important; }
.pr80 { padding-right: 80px !important; }
.pl0 { padding-left: 0 !important; }
.pl15 { padding-left: 15px !important; }
.pl20 { padding-left: 20px !important; }
.pl40 { padding-left: 40px !important; }
.pl60 { padding-left: 60px !important; }
.pl80 { padding-left: 80px !important; }

.pt5 { padding-top:5px !important; }


.py5 {padding-left:5px !important; padding-right:5px !important;}
.py10 {padding-left:10px !important; padding-right:10px !important;}
.py15 {padding-left:15px !important; padding-right:15px !important;}
.py20 {padding-left:20px !important; padding-right:20px !important;}
.py40 {padding-left:40px !important; padding-right:40px !important;}

.help {
	cursor: help;
}

.hide, .hide-it {
	display: none;
}

._login-container{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

._login-bg:before{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,0.5);
}

._login-form{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
}

._position-stuck{
	bottom: 16px;
}

._position-middle-stuck{
	top: 50px;
}

._login-img{
	margin-top: -50px;
}
._login-img img{
	max-width: 150px;
	-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

._white{
	color: #fff;
}

._black{
	color: #444;
}

._login-form ._position-middle{
	text-align: left;
	width: 100%;
	margin: auto;
}

._layout-xs{
	max-width: 360px;
	margin: auto;
}

._login-form p {
	margin-bottom: 30px;
}

._login-form .btn:hover{
	color: #fff;
}

._password-show{
	position: absolute;
	top: 8px;
	right: 0;
	padding: 5px 12px;
	border-radius: 4px;
	background-color: #008eaa;
	display: inline-block;
	color: #fff;
	font-size: 10px;
	cursor: pointer;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	z-index: 100;
}

._password-show:hover{
	opacity: 0.8;
}

._login-position-middle{
	margin-top: 20px;
}

@media (min-width: 993px){
	._login-position-middle{
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		    -ms-transform: translate(-50%,-50%);
		        transform: translate(-50%,-50%);
		width: 100%;
		z-index: 100;
	}

	._login-position-bottommiddle{
		position: absolute;
		bottom: 16px;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		    -ms-transform: translate(-50%,-50%);
		        transform: translate(-50%,-50%);
		text-align: center;
	}
}

@media (max-width: 992px){
	._login-position-middle{
		position: relative;
	}
	._login-form{
		overflow-y: auto;
		overflow-x: hidden;
	}
	._login-position-bottommiddle{
		margin: 32px 16px;
	}
}

._login-form h4 {
	font-size: 1.7em;
	color: #00468b;
	margin-bottom: 15px;
}

._login-form h4.loggedin {
	font-size: 1.4em;
}

.input-field .prefix.active {
	color: #259a47 !important;
}

._login-form input:focus {
	border-bottom: 1px solid #259a47 !important;
	-webkit-box-shadow:0 1px 0 0 #26a69a !important;
	box-shadow:0 1px 0 0 #26a69a !important;
}

.btn, .btn-small, .btn-large,
.btn:hover, .btn-small:hover, .btn-large:hover, 
.btn:focus, .btn-small:focus, .btn-large:focus {
	background-color: #008eaa;
		color: #fff;
}

.btn-large:hover{
	color: #fff;
	background-color: #019ab8;
}

._login-form .btn-large i {
	font-size: 1.2rem !important;
}

._text-btn{
	position: absolute;
	right: 120%;
	top: -16px;
}

/* In Edge, the link onclick event (which controls the postback) won't fire if you click exactly on the icon or the word, 
since they are on top of the button (and children), but the sending shows, so the user thinks they are just stuck on the age. 
Apply pointer-events: none to basically make them "transparent", so the button underneath can be clicked, calling the onclick */

.btn-large span, .btn-large i {
	pointer-events: none;
}

@media (min-width: 993px){
	._login-position-middle-stuck{
		top: 45%;
		left: 80%!important;
	}
}

._stack-behind {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	background-image: -webkit-gradient(linear, left bottom, left top, from(#008eaa), to(#00468b));
	background-image: -webkit-linear-gradient(bottom, #008eaa 0%, #00468b 100%);
	background-image: -o-linear-gradient(bottom, #008eaa 0%, #00468b 100%);
	background-image: linear-gradient(to top, #008eaa 0%, #00468b 100%);
	-webkit-transition: 40s;
	-o-transition: 40s;
	transition: 40s;
}

._login-container:hover ._stack-behind{
	-webkit-filter: hue-rotate(360deg);
	        filter: hue-rotate(360deg);
}

._bg-white {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));
	background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee);
	background-image: -o-linear-gradient(top, #ffffff, #eeeeee);
	background-image: linear-gradient(to bottom, #ffffff, #eeeeee);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1);
	        box-shadow: 0 0 3px rgba(0,0,0,0.1);
	border-radius: 8px;
}

._stack-behind-bg {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 350px;
	/* background-image: url(../images/dynamic/bg.php?type=microscope); Note: retired this page and moved to pull from centralized ASN collection */
	background-image: url(//www.asn-online.org/images/dynamic/bg.aspx?type=microscope);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.8);
	        box-shadow: 0 0 5px rgba(0,0,0,0.8);
}

._stack-behind-bg:before{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,0.5);
}

._position-leftmiddle {
	width: 80%; /* note: since we took this out of the flow, it no longer inherits from parent, so js will resize it to 80% of ._stack-behind-bg */
	z-index: 1;
}

._lily-pad-stuck{
	padding: 20px;
}

._position-leftmiddle ._lily-pad-stuck {
	margin-left: 50px;
	position: relative;
}

._lily-pad-stuck h1 {
	font-family: "Gotham", "Montserrat", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

._lily-pad-stuck p {
	font-family: 'SegoeUI', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@media (min-width: 993px){
	._lily-pad-stuck{
		padding: 20px 25px;
	}
}



/* notification messages */
.message_blue, .message_green, .message_yellow, .message_red, .message_loading {
    	border-radius: 1px;
    	border: none;
    	padding: 20px 60px;
    	position: relative;
    	border-left:4px solid rgba(0,0,0,0.2);
}
.message_blue a, .message_green a, .message_yellow a, .message_red a, .message_loading a {
	border-bottom: 0px !important;
}

/* alert-info */
.message_blue {
	color: #31708f;
	background-color: #dae6f2;
}

.message_blue::before {
	position: absolute;
	top: 14px;
	left: 1em;
	content: "\e007";
	font-family: ElegantIcons;
	font-size: 1.5em;
	color: #31708f;
}

/* alert-success */
.message_green {
	color: #3c763d;
	background-color: #dfe9b7;
}

.message_green::before {
	position: absolute;
	top: 14px;
	left: 1em;
	content: "\e052";
	font-family: ElegantIcons;
	font-size: 1.5em;
	color: #3c763d;
}

/* alert-warning */
.message_yellow {
	color: #8a6d3b;
	background-color: #f8f2b6;
}

.message_yellow::before {
	position: absolute;
	top: 14px;
	left: 1em;
	content: "\73";
	font-family: ElegantIcons;
	font-size: 1.5em;
	color: #8a6d3b;
}

/* alert-danger */
.message_red {
	color: #a94442;
	background-color: #f5dcd8;
}

.message_red::before {
	position: absolute;
	top: 14px;
	left: 1em;
	content: "\e051";
	font-family: ElegantIcons;
	font-size: 1.5em;
	color: #a94442;
}

/* Loading - this mimics the fa-spin class from Font Awesome */
.message_loading {
	color: #008eaa;
	background-color: #ffffff;
}

.message_loading::before {
	position: absolute;
	top: 14px;
	left: 1em;
	content: "\f1ce";
	font-family: FontAwesome;
	font-size: 1.5em;
	color: #008eaa;
}

.message_loading::before{
	-webkit-animation: message_loading 2s infinite linear;
	animation: message_loading 2s infinite linear
}
@-webkit-keyframes message_loading {
	0%{
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg)
	}
	100%{
		-webkit-transform:rotate(359deg);
		transform:rotate(359deg)
	}
}
@keyframes message_loading {
	0%{
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg)
	}
	100%{
		-webkit-transform:rotate(359deg);
		transform:rotate(359deg)
	}
}

/**************************************************************************
 Baby Toggle - Small CSS Toggle Checkbox, Used on Login Form
**************************************************************************/

  .baby-toggle .toggle {
    appearance: none;
    background-color: #dfe1e4;
    border-radius: 72px;
    border-style: none;
    flex-shrink: 0;
    height: 20px;
    margin: 0;
    position: relative;
    width: 30px;
  }

  .baby-toggle .toggle::before {
    bottom: -6px;
    content: "";
    left: -6px;
    position: absolute;
    right: -6px;
    top: -6px;
  }

  .baby-toggle .toggle,
  .baby-toggle .toggle::after {
    transition: all 100ms ease-out;
  }

  .baby-toggle .toggle::after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 14px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 14px;
  }

  .baby-toggle input[type=checkbox] {
    cursor: default;
  }

  .baby-toggle .toggle:hover {
    background-color: #c9cbcd;
    transition-duration: 0s;
  }

  .baby-toggle .toggle:checked {
    background-color: #259847;
  }

  .baby-toggle .toggle:checked::after {
    background-color: #fff;
    left: 13px;
  }

  .baby-toggle :focus:not(.focus-visible) {
    outline: 0;
  }

  .baby-toggle .toggle:checked:hover {
    background-color: #155929;
  }

  .baby-toggle-label {
	font-size: 0.8em;
	vertical-align: top;
  }

/* Page-Specific Implementations of Baby Toggle */
/* Override mnel CSS on login page */
#login_form .baby-toggle .toggle {
	position: relative;
	opacity: 1;
	pointer-events: auto;
}

#login_form .baby-toggle .toggle:focus {
	border-bottom: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}