/** Include icon font **/
@import url("icons/css/icons-font.min.css");

body.body-login {font-family:Helvetica,sans-serif;color:#61616c;font-size:12px;margin:0; overflow: auto;}
.main{width:100%;height:100%;position:relative }
.main #top{height:100%;background:url(images/login/main-bg.png) no-repeat center center;text-shadow: 0 0 5px #fff;color: transparent;filter: blur(10px);-webkit-filter: blur(10px);-moz-filter: blur(10px);-o-filter: blur(10px);-ms-filter: blur(10px);filter: blur(10px);animation-name: unblurAnimation;animation-duration: 3s;-webkit-animation-name: unblurAnimation;-webkit-animation-duration: 3s;-moz-animation-name: unblurAnimation;-moz-animation-duration: 3s;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;width: 100%;background-size: contain;}
#top .logo{}
img.logo-login{max-width:444px;max-height:141px;}
.main #form{width:100%;position: absolute;top: 20%;text-align: center;}
@keyframes unblurAnimation {
  from { color:#fff;text-shadow: none; filter: blur(0px);  -webkit-filter: blur(0px); -moz-filter: blur(0px);  -o-filter: blur(0px);  -ms-filter: blur(0px);  filter: blur(0px);}
  to {opacity: 0.5; text-shadow: 0 0 5px #fff;color: transparent;   filter: blur(10px);  -webkit-filter: blur(10px);  -moz-filter: blur(10px);  -o-filter: blur(10px);  -ms-filter: blur(10px);  filter: blur(10px);}
}
@-webkit-keyframes unblurAnimation {
  from {color:#fff;text-shadow: none; filter: blur(0px);  -webkit-filter: blur(0px);}
  to {opacity: 0.5; text-shadow: 0 0 5px #fff; color: transparent; filter: blur(10px);  -webkit-filter: blur(10px);-moz-filter: blur(10px);  -o-filter: blur(10px);  -ms-filter: blur(10px);  filter: blur(10px);}
}
@keyframes blurAnimation {
  from {text-shadow: 0 0 5px #fff;color: transparent;   filter: blur(3px);  -webkit-filter: blur(3px);  -moz-filter: blur(3px);  -o-filter: blur(3px);  -ms-filter: blur(3px);  filter: blur(3px);}
  to { color:#fff;text-shadow: none; filter: blur(0px);  -webkit-filter: blur(0px); -moz-filter: blur(0px);  -o-filter: blur(0px);  -ms-filter: blur(0px);  filter: blur(0px);}
}
@-webkit-keyframes blurAnimation {
  from {text-shadow: 0 0 5px #fff; color: transparent; filter: blur(3px);  -webkit-filter: blur(3px);-moz-filter: blur(3px);  -o-filter: blur(3px);  -ms-filter: blur(3px);  filter: blur(3px);}
  to {color:#fff;text-shadow: none; filter: blur(0px);  -webkit-filter: blur(0px);}
}
#form h1{color:#61616c;font-size:20px;margin:0;padding:10px 0 5px}
#form .hr{height:10px;display:inline-block;width:100%}
#form .table{width:280px;position:relative;}
#form .table p{padding-top:5px;padding-bottom:10px;font-size:11px;margin:0}
#form table th{text-align:left;font-size:12px;color: #00b0ff; padding-top: 9px;}
#form table .input{width:200px; padding: 4px 3px;  outline: none;}
#form .info{position:absolute;right:-240px;top:20px;width:200px;text-align:left;padding-left:10px;height:310px}
#form .info h1{font-size:18px;color:#8B9194;padding:1px 0 8px}
#form .info p{font-size:10px;color:#8B9194;padding:0}
.main #footer{position: absolute; bottom: 0; width: 100%;height: 20px;}
.main #footer div{text-align:center;color:#939496;padding-top:5px}
.main #footer span.footer-logo{width:105px;}
#form p.upper{text-transform:uppercase;color:#61616c;}
.btn-reset input,.btn-login input{border:0;background:none;color:#FFF;cursor:pointer;height: 30px!important;line-height: 30px;padding-left:0!important;outline: none;width: 100%;}
.btn-reset,.btn-login{border-radius: 3px;color:#fff;border:0px;display:inline-block;margin:0;padding:0;}
.btn-login {box-shadow: 0 1px 2px rgba(0,0,0,.26);background-color: #00b0ff;float: right;background-image: url(images/login/btn-login.png);background-repeat: no-repeat;background-position: 8px center;width: 100%;}
.btn-login:hover {  box-shadow: 0 2px 5px rgba(0,0,0,.4);transition:0.2s;-moz-transition:0.2s;-o-transition:0.2s;-webkit-moz-transition:0.2s;}
.btn-reset{ display:none}
.btn-reset em,.btn-login em{display:inline-block;color:#fff;font-size:12px;text-decoration:none;width: 100%;}
.btn-reset em span,.btn-login em span{display:inline-block;padding-right:5px;width: 100%;}
.error { color: #c62828;  background: rgba(198, 40, 40, 0.2); padding: 2px 20px;  -moz-border-radius: 4px;  -webkit-border-radius: 4px;  border-radius: 4px; display:block; overflow: hidden; text-overflow: ellipsis;}
.required { color:#942126 }
.ext-el-mask-msg{ background: #f6f6f6 !important;    border: 0px !important;    padding: 8px!important;    background-color: rgb(255, 255, 255);    border-radius: 50%;box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, -0.8), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);}
.ext-el-mask-msg div{cursor:wait;width: 40px;height: 40px;font-size:0px;background-color: #b5b9c1;padding: 10px;text-align: center;opacity:0.8;}
.ext-ie8 .ext-el-mask-msg{ background:url(images/spinner.gif) center center no-repeat; border:0!important;background: transparent !important;}
.ext-ie8 .ext-el-mask-msg div{width: 50px;height: 50px;}
.ext-el-mask{background-color:#7F8291;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";opacity:0.5;z-index:1000;}
.loader{background:url(images/spinner.gif) center center no-repeat;background-color: #b5b9c1; padding: 10px;text-align: center;opacity:0.8 }
.ext-el-mask-msg div {  font-size: 10px;  position: relative;  text-indent: -9999em;  border-top: 0.5em solid rgba(255, 255, 255, 0.2);  border-right: 0.5em solid rgba(255, 255, 255, 0.2);  border-bottom: 0.5em solid rgba(255, 255, 255, 0.2);  border-left: 0.5em solid #00B0FF;  -webkit-transform: translateZ(0);  -ms-transform: translateZ(0);  transform: translateZ(0);  -webkit-animation: load8 1.1s infinite linear;  animation: load8 1.1s infinite linear;  background-color: transparent;  padding: 0px;}
.ext-el-mask-msg div,.ext-el-mask-msg div:after {  border-radius: 50%;}
@-webkit-keyframes load8 {  0% {    -webkit-transform: rotate(0deg);    transform: rotate(0deg);  }
  100% {    -webkit-transform: rotate(360deg);    transform: rotate(360deg);  }
}
@keyframes load8 {  0% { -webkit-transform: rotate(0deg);    transform: rotate(0deg);  }  
  100% {    -webkit-transform: rotate(360deg);    transform: rotate(360deg);  }
}
.loginform .group { position:relative;  margin: 25px 20px;}
.loginform .btn-group { margin: 25px 20px;}
.loginform .group + .group { margin-bottom: 10px}
.loginform .group input:-webkit-autofill,
.loginform .group input:-webkit-autofill:FOCUS{-webkit-box-shadow: 0 0 0px 1000px #fff inset;opacity: 0.6;  border-bottom: 1px solid #00b0ff;}
.loginform .group input{  border: 0;  background-image: -webkit-linear-gradient(#8a8a99, #8a8a99);  background-image: linear-gradient(#8a8a99, #8a8a99);  background-size: 100% 1px !important;  background-repeat: no-repeat;  background-position: center bottom;  background-color: transparent;}
.loginform .group input:focus { border: 0;  background-image: -webkit-linear-gradient(#00b0ff, #00b0ff), -webkit-linear-gradient(#ddd, #ddd);  background-image: linear-gradient(#00b0ff, #00b0ff), linear-gradient(#ddd, #ddd);  -webkit-animation: inputslogin 0.5s forwards;  animation: inputslogin 0.5s forwards;  box-shadow: none;  outline: 0;  background-size: 0% 2px;}
.loginform .group input {  display:block;  width:100% ; border:none; height: 27px;}
.loginform .group input:focus { outline:none; }
.loginform .group input:-moz-submit-invalid {  box-shadow: none;}
.loginform .group input:-moz-ui-invalid {  box-shadow:none;}
/* LABEL ======================================= */
.loginform .group label, .loginform .group input:invalid ~ label {   padding-left: 17px; font-weight:normal; position:absolute; pointer-events:none;  left: 0px;
transition-property: top,background; transition-duration: 0.2s;  transition-timing-function: linear;
-webkit-transition-property: top,background; -webkit-transition-duration: 0.2s;  -webkit-transition-timing-function: linear;
-moz-transition-property: top,background; -moz-transition-duration: 0.2s; -moz-transition-timing-function: linear;
-o-transition-property: top,background; -o-transition-duration: 0.2s; -o-transition-timing-function: linear; top: -15px;  font-size:13px;  color:#00b0ff;
}
.loginform .group.login label {background:url(images/login/user.png) top left no-repeat;} 
.loginform .group.password label {background:url(images/login/pass.png) top left no-repeat;}
/* active state */
.loginform .group input:-webkit-autofill ~ label { top: -15px;  font-size:13px;  color:#00b0ff;}
.loginform .group input:-webkit-autofill ~ label { top: -15px; }
/** scroll footer button actions **/
.x-tab-scroller-left, .x-tab-scroller-right,
.x-grid-scroller-right, .x-grid-scroller-left {
	background-image: none !important;
	background-color: #b8d6f3;
	position: absolute;
	bottom: 13px;
	width: 16px !important;
	height: 30px;
	z-index: 101;
	font: 25px/1.2 FontAwesome;
	color: #fff;
	text-align: center;
	border-bottom: 0px;
}
.x-tab-scroller-left, .x-tab-scroller-right {
	height: 32px !important;
	font: 25px/1.3 FontAwesome;
}
.x-grid-scroller-left {
	left: -2px;
}
.x-grid-scroller-right {
  	right: 0px;
}
.x-tab-scroller-left {
	left: 0px;
	border-radius: 4px 0px 0px 0px;
}
.x-tab-scroller-right {
  	right: 0px;
  	border-radius: 0px 4px 0px 0px;
}
.x-tab-scroller-left:hover, .x-tab-scroller-right:hover,
.x-grid-scroller-right:hover, .x-grid-scroller-left:hover {
	color: #fff;
	background-color: #96afcf;
	transition : 0.3s;
}
.x-tab-scroller-right:before,
.x-grid-scroller-right:before {
	content: "\f105";
}
.x-tab-scroller-left:before,
.x-grid-scroller-left:before {
	content: "\f104";
}
@-webkit-keyframes inputslogin {  0% {    background-size: 0% 2px, 100% 2px;  }  100% {    background-size: 100% 2px, 100% 2px;  }}
@keyframes inputslogin {  0% {    background-size: 0% 2px, 100% 2px;  }  100% {    background-size: 100% 2px, 100% 2px;  }}
/** background colors**/
.bg-color-Aqua,.bg-color-Aqua input,.bg-color-Aqua textarea {
	background-color: aqua !important;
	background: aqua !important
}

.bg-color-Black,.bg-color-Black input,.bg-color-Black textarea {
	background-color: black !important;
	background: black !important
}

.bg-color-Blue,.bg-color-Blue input,.bg-color-Blue textarea {
	background-color: blue !important;
	background: blue !important
}

.bg-color-Fuchsia,.bg-color-Fuchsia input,.bg-color-Fuchsia textarea {
	background-color: fuchsia !important;
	background: fuchsia !important
}

.bg-color-Grey,.bg-color-Gray input,.bg-color-Gray textarea {
	background-color: gray !important;
	background: gray !important
}

.bg-color-Green,.bg-color-Green input,.bg-color-Green textarea {
	background-color: green !important;
	background: green !important
}

.bg-color-Lime,.bg-color-Lime input,.bg-color-Lime textarea {
	background-color: lime !important;
	background: lime !important
}

.bg-color-Maroon,.bg-color-Maroon input,.bg-color-Maroon textarea {
	background-color: maroon !important;
	background: maroon !important
}

.bg-color-Navy,.bg-color-Navy input,.bg-color-Navy textarea {
	background-color: navy !important;
	background: navy !important
}

.bg-color-Olive,.bg-color-Olive input,.bg-color-Olive textarea {
	background-color: olive !important;
	background: olive !important
}

.bg-color-Purple,.bg-color-Purple input,.bg-color-Purple textarea {
	background-color: purple !important;
	background: purple !important
}

.bg-color-Red,.bg-color-Red input,.bg-color-Red textarea {
	background-color: red !important;
	background: red !important
}

.bg-color-Silver,.bg-color-Silver input,.bg-color-Silver textarea {
	background-color: silver !important;
	background: silver !important
}

.bg-color-Teal,.bg-color-Teal input,.bg-color-Teal textarea {
	background-color: Teal !important;
	background: Teal !important
}

.bg-color-White,.bg-color-White input,.bg-color-White textarea {
	background-color: white !important;
	background: white !important
}

.bg-color-Yellow,.bg-color-Yellow input,.bg-color-Yellow textarea {
	background-color: yellow !important;
	background: yellow !important
}
.mmCategoriesBG {
	background-color: white;
	height: 50px;
	position: absolute;
	top: 0px !important;
	left: 155px;
}

.mmtable {
	display: table;
	table-layout: fixed;
	position: absolute;
	height: 70px;
	background-color: white;
}

.mmrow {
	display: table-row;
}

.mmtd {
	display: table-cell;
	text-align: center;
	font-family: "Roboto";
	font-size: 16px;
	color: #c5c8cf;
	padding-top: 10px;
	
}

.mmseparator {
	border-left: 1px dotted #ccc;
	width: 1px;
	position: absolute;
	top: 70px;
}