
	#formError{
		margin-top: 50px;
	}
	.ran-pw{
		margin-top: -23px;
		margin-bottom: 20px;
		z-index: 5;
    	position: relative;
	}
	
.simple-form{
	margin-top: 15px;
}

/* checkbox/*/
.pw-check input[type="checkbox"] {
    display:none;
}	

.pw-check input[type="checkbox"] + label {
    display:inline-block;
    width: 25px;
    height: 25px;
    background: url(/easel/includes/Responsive_Login/images/show-hide.png) left top no-repeat;
    background-size: cover;
}
	.pw-check input[type="checkbox"]:checked + label {
		 background:url(/easel/includes/Responsive_Login/images/show-hide-checked.png) left top no-repeat;
		background-size: cover;
	}
	.pw-check{
		display:inline-block;
		right: 0 !important;
		position: absolute;
		top: 10px;
	}
	
/* form starting stylings ------------------------------- */


/* standard styling */
textarea:focus, input:focus{
    outline: none;
  border-bottom: 1px solid red;
}
.floating-fields .highlight {
  position:absolute;
  height:60%; 
  width:100%; 
  top:4%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
.form-input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#d1002e; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#d1002e; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#d1002e; }
  to 	{ width:0; background:transparent; }
}


/* this style adds floated label on Chrome Autofilled fields*/
	input.fl-input:-webkit-autofill ~ label.fl-label{
	top: -12px;
    padding: 3px;
		opacity: 1;
    visibility: visible;
	color: red;
}
.group {
    display: block;
    position: relative;
	margin-bottom: 25px;
	width: 100%;
}

.group label{
    position: absolute;
    cursor: text;
    font-size:12px;
    opacity: 1;
    -webkit-transition: all .2s;
    transition: all .2s;
    top: -15px;
    left: 12px;
    z-index: 3;
    padding: 0 1px
}

.group label::after,
.group>span::after {
    content: " ";
    display: block;
    position: absolute;
    background: transparent;
    height: 2px;
    top: 50%;
    left: -.2em;
    right: -.2em;
    z-index: -1
}

.group .form-input::-webkit-input-placeholder {
    opacity: 1;
    -webkit-transition: all .2s;
    transition: all .2s
}

.group .form-input::-moz-placeholder {
    opacity: 1;
    transition: all .2s
}

.group .form-input:-ms-input-placeholder {
    opacity: 1;
    transition: all .2s
}

.group .form-input::placeholder {
    opacity: .8;
    -webkit-transition: all .2s;
    transition: all .2s
}

.group .form-input:placeholder-shown:not(:focus)::-webkit-input-placeholder {
    opacity: 0
}

.group .form-input:placeholder-shown:not(:focus)::-moz-placeholder {
    opacity: 0
}

.group .form-input:placeholder-shown:not(:focus):-ms-input-placeholder {
    opacity: 0
}

.group .form-input:placeholder-shown:not(:focus)::placeholder {
    opacity: 0
}

.group .form-input:placeholder-shown:not(:focus)+* {
    font-size: 17px !important;
    top: 6px;
    font-weight: 400 !important;
	pointer-events: none !important;
	padding-left: 5px !important;
	
} 
.input-group .group:not(:last-child) .form-input {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0
}

.input-group .group:not(:first-child) .form-input {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    margin-left: -1px
}

/* active state
/* active state */
.floating-fields .form-input:focus ~ .bar:before,  .floating-fields .form-input:focus ~ .bar:after {
  width:50%;
}
/* /// custom styling for FFO */
.simple-form .group label, .group>span, .select-group label, .select-group>span{
	color: #999 !important;
    font-weight: 100;
	opacity: 1 !important;
	pointer-events:none !important;
}
.select-group label{
	    position: absolute;
    cursor: text;
    font-size: 12px;
    opacity: 1;
    top: -15px;
    z-index: 3;
    padding: 0 1px;
}
.simple-form input.form-input{
	width: 100% !important;
	border: none !important;
	border-bottom: 1px solid #000 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-size: 17px !important;

    padding: 6px 5px !important;
/*	background: transparent;*/
	margin: 0;
}
.group label, .group>span{
left: 0px !important;
}




/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:100%; height: 0; top: -1px; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
background: rgba(209, 0, 46, 1);
  top: 0 !important;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state
/* active state */
 .simple-form .form-input:focus ~ .bar:before,   .simple-form .form-input:focus ~ .bar:after {
  width:50%;
}


/* HIGHLIGHTER ================================== */
.highlight {
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: none !important;
    top: 4%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}

/* active state */
  .simple-form .form-input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}


/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#e7282d; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#e7282d; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#e7282d; }
  to 	{ width:0; background:transparent; }
}



/*////CUSTOM ADEASEL LOG IN FORM////*/


/* Hover tooltips */
.field-tip, .field-tip2 {
    position:relative;
    cursor:help;
}
	.field-tip div{
		position: relative;
	}
    .field-tip .tip-content{
        position:absolute;
		text-align: center;
        top:-46px; /* - top padding */
        right:9999px;
        width:118px;
        margin-right:-62px; /* width + left/right padding */
        padding:10px;
        color:#fff;
		font-size: 12px;
        background:#333;
        opacity:0;
        -webkit-transition:opacity 250ms ease-out;
           -moz-transition:opacity 250ms ease-out;
            -ms-transition:opacity 250ms ease-out;
             -o-transition:opacity 250ms ease-out;
                transition:opacity 250ms ease-out;
    }
 .tip-content.show-hide{
        position:absolute;
		text-align: center;
        top:-57px; /* - top padding */
        right:9999px;
        width:118px;
        margin-right:-90px; /* width + left/right padding */
        padding:10px;
        color:#fff;
		font-size: 12px;
        background:#333;
        opacity:0;
        -webkit-transition:opacity 250ms ease-out;
           -moz-transition:opacity 250ms ease-out;
            -ms-transition:opacity 250ms ease-out;
             -o-transition:opacity 250ms ease-out;
                transition:opacity 250ms ease-out;
    }
        /* <http://css-tricks.com/snippets/css/css-triangle/> */
        .field-tip .tip-content:before {
            content:' '; /* Must have content to display */
            position:absolute;
            bottom: -8px;
            width:0;
            height:0;
			border-left: 8px solid transparent;
  			border-right: 8px solid transparent; 
  			border-top: 8px solid #333;
           
			right: 50%;
        }
        .field-tip:hover .tip-content {
            right:-20%;
            opacity:1;
        }
	
	
	

	input#submit{-webkit-appearance: none;
	background-color: #ddd;}

	#formError{
		margin-top: 0 !important;	
		text-align: center;
		padding-top: 10px;
		padding-bottom: 10px;
		background-color: rgba(225, 255, 255, .7);
		margin-bottom: 25px;
	}
	#formError div {
		margin-left: auto !important;
	}	

	.recover-pw a{
		color: #fff !important;
		text-decoration: none;
		margin-bottom: 15px;
		
	}

	
	
	 
	
	/*/Basic Form styles*/

.ran-pw{
		margin-top: -23px;
		margin-bottom: 20px;
		z-index: 5;
    	position: relative;
	}

.select-group{
		display: block;
		margin-bottom: 25px !important;
	position:relative;
		
	}
.simple-form .input-select{
		background-color:transparent !important;
		margin-left: 0 !important;
		border: 0 !important;
		border-bottom: 1px solid #000 !important;
		height: 35px;
	    width: 100% !important;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	background-position: 98% center;
	background-size: .65em auto ;

	
	}
.select-group label{
		margin-left: 0 !important;
	}
.select-group select{
	padding: 0 5px !important;
		margin: 0 !important;
}

.field-label{
		font-size: 15px;
	}
.filled-in .field-label{
	top:-20px;
    font-size:14px;
    color:#000;
	}
	#Page_Title{
		margin-top: 35px;
	}
	
/* form starting stylings ------------------------------- */


	
/* checkbox/*/
.pw-check input[type="checkbox"] {
    display:none;
}	
.pw-check input[type="checkbox"] + label {
    display:inline-block;
    width: 25px;
    height: 25px;
    background: url(/easel/includes/Responsive_Login/images/show-hide.png) left top no-repeat;
    background-size: cover;
}
.pw-check input[type="checkbox"]:checked + label {
		 background:url(/easel/includes/Responsive_Login/images/show-hide-checked.png) left top no-repeat;
		background-size: cover;
	}
.pw-check{
		display:inline-block;
		    right: 55px !important;
    position: absolute;
    top: 25px;
	}
.pw-forgot{
		display:inline-block;
		right: 0 !important;
		position: absolute;
		top: 10px;
		}
.pw-forgot img{
		height: 24px !important;
	}