﻿/*===============================================
  Login.aspx
================================================= */
body
{ background: url(../images/5.png) repeat top left #f6f6f6 !important;
}

div.login-page {

  height: 580px;
  top: 50%;
  position: absolute;

  width: 100%;
  margin: 0;
  margin-top: -290px;
  padding: 0;
  font-family: 'Open Sans',Helvetica, Arial, sans-serif;
  color: #666666;
  -webkit-font-smoothing: antialiased;
  /* Fix for webkit rendering */
  -webkit-text-size-adjust: 100%;
  font-size-adjust: 100%;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.475;
  
  background: url(../images/5.png) repeat top left #f6f6f6;
}

div.login-page #page-logo {
  width: 280px;
  margin: 5px auto 20px;
  text-align: center;

}

div.login-page .panel {
  width: 300px;
  margin: 0 auto;
  position: relative; }

div.login-page .login-avatar {
  margin: 15px 20px 25px;
  padding-bottom: 25px;
  border-bottom: 1px dashed #DDD; }

div.login-page .login-avatar img {
  display: block;
  margin: 0 auto;
  padding: 5px;
  border: 2px solid #DDD; }

div.login-page .login-alert {
  font-size: 13px;
  padding: 9px 13px; }


.panel.panel-visible, .panel-heading.panel-visible {
  overflow: visible !important; }

.panel {
  position: relative;
  margin-bottom: 5px;
  overflow: hidden;
  background-color: #FFF !important;
  border-color: #c9c9c9 !important;
  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.33);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.33);
  
}

.panel-heading {  
  overflow: hidden;
  position: relative;
  height: 41px;
  padding: 4px 20px 1px;
  color: #666;
  border-bottom: 1px solid #c9c9c9 !important;
  border-top: 0px solid #c9c9c9 !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 33px;
  border-radius: 3px 3px 0 0;
  text-shadow: 0 1px #ffffff;
  background-color: #f0f0f0 !important;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
  box-sizing: border-box;
  }

.panel-title {
  float: left;
  padding-top: 1px;
  font-size: 14px;
  text-shadow: 0 1px #ffffff;  
}

/* Helpful for wrapping form components in
 * when placing them in the header. Otherwise
 * they can break the title with their width */
.panel-heading .panel-field {
  max-width: 140px; }


/*===============================================
  B. Titles
================================================= */
/* Used as a divider between panel content */
.panel-body-title {
  margin-bottom: 20px;
  padding: 10px 0 15px;
  color: #666;
  border-bottom: 1px solid #DDD;
  line-height: 18px; }

/* Used as small text in panel header and footers */
.panel-title-sm {
  padding-right: 5px;
  color: #888;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 1px #ffffff; }

/*===============================================
  C. Panel Addon - Menu
  -----------------------------------------------
  Typically placed under the panel header 
  and used to hold buttons or menus 
================================================= */
.panel-menu {
  padding: 10px 13px;
  background-color: #eee;
  border-bottom: 1px solid #C9c9c9; }

.panel-heading + .panel-menu {
  -webkit-box-shadow: 0 5px 5px -4px rgba(0, 0, 0, 0.15) inset;
  box-shadow: 0 5px 5px -4px rgba(0, 0, 0, 0.15) inset; }

.panel-menu .btn-default.btn-gradient.active {
  background-color: #FFF;
  color: #39b1d5;
  box-shadow: none; }

/*===============================================
  D. Panel Addon - Sidemenu
  -----------------------------------------------
  A side column great for housing an
  extra nav list. When used its sibling
  panel body (content) is modified 
================================================= */
.panel-sidemenu + .panel-body {
  position: relative;
  float: left;
  width: 70%;
  margin: 40px 3.5% 100px;
  padding: 0; }

/* Sidemenu and content are both floated. 
 * to create equal heights we expand the sidemenu 
 * with padding and allow its parent container 
 * to catch the overflow */
.panel-sidemenu {
  position: relative;
  float: left;
  width: 23%;
  height: 100%;
  padding: 5px;
  background-color: #f6f6f6;
  border-right: 1px solid #CCC;
  margin-bottom: -2000px;
  padding-bottom: 2000px; }

.panel-sidemenu ul.nav {
  margin-top: 30px;
  padding-left: 30px; }

.panel-sidemenu ul.nav li {
  margin-bottom: 4px;
  list-style: none; }

.panel-sidemenu ul.nav li.nav-title {
  padding: 10px 0;
  color: #777;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 1px #FFF; }

.panel-sidemenu ul.nav li.nav-title:hover {
  color: #777777; }

.panel-sidemenu ul.nav li a {
  padding: 5px 0;
  color: #888; }

.panel-sidemenu ul.nav .divider {
  width: 80%;
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background: #e2e2e2; }

.panel-footer {
padding: 10px 15px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}

.form-group {
margin-bottom: 15px;
}

/* Sidemenu is hidden on small devices */
@media (max-width: 1000px) {
  .panel-sidemenu {
    display: none; }

  .panel-sidemenu + .panel-body {
    width: 93%;
    margin: 40px 3.5% 100px; } }


.form-control {
display: block;
width: 90%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.input-group .form-control {
position: relative;
z-index: 2;
float: left;
margin-bottom: 0;
}

.input-group-addon, .input-group-btn, .input-group .form-control {
display: table-cell;
}

.input-group {
position: relative;
display: table;
border-collapse: separate;
}

.input-group-addon, .input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}

.input-group-addon {
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
line-height: 1;
color: #555;
text-align: center;
background-color: #eee;
border-right: 0px !important;
border-bottom-left-radius:4px !important;
border-top-left-radius:4px !important;
}

.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

.input-group-addon {
  border-right: 0;
}

.panel-body {
padding: 15px;
}

#main{  margin-top: 15px}

.icon-space-right{  margin-right:3px; }

.green.btn {
  color: white;
  background-color: #35aa47;
  border-color: "";
}

.green.btn:hover, .green.btn:focus, .green.btn:active, .green.btn.active {
  color: white;
  background-color: #2b8b3a;
}


/***
Metro icons
***/
[class^="m-icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  line-height: 14px;
  vertical-align: top;
  background-image: url(../images/syncfusion-icons.png);
  background-position: 0 0;
  background-repeat: no-repeat;
}

[class^="m-icon-big-"] {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 6px;
  vertical-align: middle;
  background-image: url(../images/syncfusion-icons.png);
  background-position: 0 0px;
  background-repeat: no-repeat;
}

/* large icons */
.btn.m-icon-big {
  padding: 9px 16px 8px 16px;
}

.btn.m-icon-big.m-icon-only {
  padding: 9px 8px 8px 0px;
}

.btn.m-icon-big [class^="m-icon-big-"] {
  margin: 0 0 0 10px;
}

.btn.m-icon-ony > i {
  margin-left: 0px;
}

/* default icons */
.btn.m-icon {
  padding: 7px 14px 7px 14px;
}

.btn.m-icon [class^="m-icon-"] {
  margin: 4px 0 0 5px;
}

.btn.m-icon.m-icon-only {
  padding: 7px 10px 7px 6px;
}
.m-icon-swapright {
  background-position: -27px -10px;
}

.m-icon-white {
  background-image: url(../images/syncfusion-icons-white.png);
}

.m-icon-swapleft {
  background-position: -8px -10px;
}

.mensagem-erro { margin-top :20px; margin-left: 100px; margin-right: 100px;}

.forget-form { margin-bottom:20px;}

.btn-loader{
display: inline-block;
height: 20px;
float: left;
width: 20px;
}

.icon-loading { background-image:url(/Assets/images/input-spinner.gif); margin-right:10px; background-size: cover; }


/*MOX-Loading*/
#MOX-Loading{
	width: 100%;
	height: 100%;
	z-index: 20000;
	position:absolute;
	overflow: hidden;
}
	#MOX-Loading .loader-bg{
		width: 100%;
		height: 100%;
		position:absolute;
		display: table-cell;
		top: 0;
		left: 0;
		opacity: 0.8;
		-moz-opacity: 0.8;
		filter: alpha(opacity=80);
		background-color: #FFF;
	}
	#MOX-Loading .loader-text{
		background-color: #F7F7F7;
		text-align: center;
		vertical-align: middle;
		position: absolute;
		z-index:999;
		top: 40%;
		left: 42%;
		padding: 20px;
		border: 1px solid #EEE;
		border-radius: 1px; 
	}
	#MOX-Loading .loader-text span{		
		color: #666;
		display: block;
		font-size: 15px;
		font-weight: normal;
		line-height: 20px;
    padding: 8px 6px 6px 45px;
	}
  

#circularG{
position:relative;
width:32px;
height:32px}

.circularG{
position:absolute;
background-color:#558CFA;
width:7px;
height:7px;
-moz-border-radius:5px;
-moz-animation-name:bounce_circularG;
-moz-animation-duration:1.12s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:normal;
-webkit-border-radius:5px;
-webkit-animation-name:bounce_circularG;
-webkit-animation-duration:1.12s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:normal;
-ms-border-radius:5px;
-ms-animation-name:bounce_circularG;
-ms-animation-duration:1.12s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:normal;
-o-border-radius:5px;
-o-animation-name:bounce_circularG;
-o-animation-duration:1.12s;
-o-animation-iteration-count:infinite;
-o-animation-direction:normal;
border-radius:5px;
animation-name:bounce_circularG;
animation-duration:1.12s;
animation-iteration-count:infinite;
animation-direction:normal;
}

#circularG_1{
left:0;
top:13px;
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}

#circularG_2{
left:3px;
top:3px;
-moz-animation-delay:0.56s;
-webkit-animation-delay:0.56s;
-ms-animation-delay:0.56s;
-o-animation-delay:0.56s;
animation-delay:0.56s;
}

#circularG_3{
top:0;
left:13px;
-moz-animation-delay:0.7s;
-webkit-animation-delay:0.7s;
-ms-animation-delay:0.7s;
-o-animation-delay:0.7s;
animation-delay:0.7s;
}

#circularG_4{
right:3px;
top:3px;
-moz-animation-delay:0.84s;
-webkit-animation-delay:0.84s;
-ms-animation-delay:0.84s;
-o-animation-delay:0.84s;
animation-delay:0.84s;
}

#circularG_5{
right:0;
top:13px;
-moz-animation-delay:0.98s;
-webkit-animation-delay:0.98s;
-ms-animation-delay:0.98s;
-o-animation-delay:0.98s;
animation-delay:0.98s;
}

#circularG_6{
right:3px;
bottom:3px;
-moz-animation-delay:1.12s;
-webkit-animation-delay:1.12s;
-ms-animation-delay:1.12s;
-o-animation-delay:1.12s;
animation-delay:1.12s;
}

#circularG_7{
left:13px;
bottom:0;
-moz-animation-delay:1.26s;
-webkit-animation-delay:1.26s;
-ms-animation-delay:1.26s;
-o-animation-delay:1.26s;
animation-delay:1.26s;
}

#circularG_8{
left:3px;
bottom:3px;
-moz-animation-delay:1.4s;
-webkit-animation-delay:1.4s;
-ms-animation-delay:1.4s;
-o-animation-delay:1.4s;
animation-delay:1.4s;
}

@-moz-keyframes bounce_circularG{
0%{
-moz-transform:scale(1)}

100%{
-moz-transform:scale(.3)}

}

@-webkit-keyframes bounce_circularG{
0%{
-webkit-transform:scale(1)}

100%{
-webkit-transform:scale(.3)}

}

@-ms-keyframes bounce_circularG{
0%{
-ms-transform:scale(1)}

100%{
-ms-transform:scale(.3)}

}

@-o-keyframes bounce_circularG{
0%{
-o-transform:scale(1)}

100%{
-o-transform:scale(.3)}

}

@keyframes bounce_circularG{
0%{
transform:scale(1)}

100%{
transform:scale(.3)}

}

