@charset 'iso-8859-2';
html,body{background: linear-gradient(to right, #41BAE7 0%,#8951EF 100%);background-repeat: no-repeat;background-size: auto 100%;min-width: 320px;overflow: auto;}
.boxlogin{width: 100%;background: #FFFFFF;margin-top: 10px;max-width: 640px;min-height: 444px;margin: 0px auto;box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);border-radius: 5px;}
.boxCreateAccount{width: 100%;background: #FFFFFF;max-width: 750px;min-height: 444px;margin: 0px auto;box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);border-radius: 5px;}
.banner img{border-radius: 0px 5px 5px 0px;}
h1 {font-weight: 500;}
.inputLabelName input{width: 100%;background: transparent;border: 1px solid #e6e6e6;border-bottom: 2px solid #e2e2e2;padding: 10px 6px 0px 6px;height: 35px;position: relative;margin-top: 5px;z-index: 2;border-radius: 3px;}
.inputLabelName div {position: absolute;font-size: 14px;left: 10px;top: 11px;color: #888888;transform-origin: bottom left;-webkit-transform-origin: bottom left;transform-origin: bottom left;-webkit-transition: all .3s cubic-bezier(0.4,0,0.2,1);transition: all .3s cubic-bezier(0.4,0,0.2,1);-webkit-transition-property: color,bottom,transform;transition-property: color,bottom,transform;z-index: 10;padding: 0px 5px 3px 5px;}
.inputLabelName input:not([disabled]):focus~div, .inputLabelName input[badinput="true"]~div, .inputLabelName .notify-form~div{color: #18b3e5;-webkit-transform: scale(.88) translateY(-20px);transform: scale(.88) translateY(-20px);background: #ffffff;left: 9px;font-weight: 500;}
.inputLabelName input:not([disabled]):focus{border-color: #f7f7f7;border-bottom-color: #6495ed;}

.inputLabelName .notify-form {position: absolute;bottom: -5px;left: 0px;line-height: 14px;padding-left: 8px;color: #f06457;font-weight: 600;height: 30px;overflow: hidden;}
.inputLabelName .notify-form~input {border-color: #ef5648 !important;margin-bottom: 25px;border-width: 2px;}
.inputLabelName .notify-form~div { color: #ef5648 !important;}
.color-red.notify-form:before {content: "\ec5a";margin-right: 6px;font-family: 'Linearicons' !important;speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;-webkit-font-smoothing: antialiased;font-size: 16px;top: 3px;position: relative;font-weight: 600;}

p.viewMail {padding: 6px 6px 6px 16px;font-size: 13px;text-align: left;border-radius: 5px;margin-top: 10px;background: #a5a5a5;color: #FFF;font-weight: 400;}
p.viewMail span { width: 100%; float: left; font-size: 17px; }

@keyframes animateLogin { 0% { background-position: -300px;  } 50% { background-position: 50%; } 99% { background-position: 150%; }  100% { background-position: -10000px; } }
.animateLoad.loadActive:after { content:""; width: 100%;background: #EEEEEE url(../images/barload.png) repeat-y;height: 4px;border-radius: 5px 0px 0px 0px;-moz-animation: animateLogin 2s infinite;-webkit-animation: animateLogin 2s infinite;-o-animation: animateLogin 2s infinite;animation: animateLogin 2s infinite;position: absolute;top: 0px;left: 0px;}
.loadActive .scroll-in{ opacity:0.4;}

#login:after, #login:before, #create-account:after, #create-account:before {-webkit-box-flex: 1;box-flex: 1;-webkit-flex-grow: 1;flex-grow: 1;content: '';display: block;height: 15%;}
.scroll {overflow: hidden;}
.scroll-in {width: 700px;}
.bodyFormLogin {height: 330px;}


/*create-account*/
.boxCreateAccount .scroll-in{width: 1000px;}

.btn-primary{background: #3ee28d;background-image: linear-gradient(to right, #10e2a6 , #86e168);color:#FFF;border: 0px;}
.btn-primary:hover{opacity: 0.8; background-image: linear-gradient(to right, #10e2a6, #10e2a6);}
.opcityInitial{ opacity: 0;}

@media screen and (max-width: 768px){
	.banner { display: none; }
    #login:after, #login:before, #create-account:after, #create-account:before{height: 5%;}
    .boxlogin{ max-width: 320px;}
    .boxCreateAccount{ box-shadow: none}
    html,body{ background: #FFFFFF;}
}