html {
  background-repeat:repeat;
  background-color:#51525c;
  background-image:-moz-radial-gradient(transparent, rgba(0,0,0,0.6)),url(../assets/images/grit.jpg);
  background-image:-webkit-radial-gradient(transparent, rgba(0,0,0,0.6)),url(../assets/images/grit.jpg);
  background-image:-ms-radial-gradient(transparent, rgba(0,0,0,0.6)),url(../assets/images/grit.jpg);
  background-image:-o-radial-gradient(transparent, rgba(0,0,0,0.6)),url(../assets/images/grit.jpg);
  background-image:radial-gradient(transparent, rgba(0,0,0,0.6)),url(../assets/images/grit.jpg);
  min-height:100%;
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a { 
	text-decoration: none; 
}

.add-on {
	position:relative; 
	width:50px !important; 
	height:38px !important;
	padding: 5px;
	border-radius: 10px 3px 3px 10px
}

.pictos-icon::before {
	font-size:32px !important;
	height:40px !important;
	line-height:13px !important;
	text-align: center;
	width: 100%;
	left:0;
}
.input-prepend input {width:50%; line-height:50px; height:50px; font-size:24px;}

.wrap {
box-sizing: border-box; padding:20px; margin:30px auto 0;
}

form#login {text-align:center;}
form#login header {color:#ffffff; text-shadow:rgba(0,0,0,0.4) 0 2px 0; padding:0 0 5px 0; margin:0 0 0 0;}

form#login h1 {margin:0; text-align:center; line-height:1;}
form#login h2 {margin:0; text-align:center; opacity:0.7; font-size:16px;}

button.login {font-size:20px; padding:10px 40px; margin:20px auto 0; display:block;}


strong.field-label {margin:0 auto 5px; width:50%; display:block; text-align:left; color:white; font-size:13px;}


#admins ul {
	-webkit-transition: margin 800ms ease-in-out;
	-moz-transition: margin 800ms ease-in-out;
}
#admins ul li {
	-webkit-transition: opacity 300ms ease-in-out;
	-moz-transition: opacity 300ms ease-in-out;
}

/* lion */
#admins ul {
text-align:center;
}
#admins ul li {
display:inline-block; width:130px; text-align:center; cursor:pointer; text-shadow:rgba(0,0,0,0.5) 0 1px 1px; color:white; font-weight:bold; font-size:14px; padding:5px 0;
}
#admins ul li label {display:block;}
#admins ul li .name {display:block; width:130px; overflow:hidden; text-overflow:ellipsis; font-weight:bold;}


input.admin_id {width:1px; height:1px; visibility:hidden;}

#admins ul li label div {
margin:0 auto 5px; border:4px solid white; width:80px; height:80px; box-shadow: rgba(0,0,0,0.2) 0 2px 2px; border-radius:80px; overflow:hidden;
}

#admins ul li label div img {vertical-align:middle; margin:0 10px 0 0;}

form#login header {
	margin:30px 0 30px;
}

form#login header h1 {font-size:50px;}

form#login nav#admins {
	white-space:nowrap; 
	overflow:auto; 
	-webkit-overflow-scrolling: touch; 
	padding-bottom:10px;
}
form#login nav#admins ul {
	position:relative; margin:0 auto; white-space:nowrap; 
}

form#login nav#admins ul li {float:left; margin:0;}

form#login div.input-prepend {width:50%; margin:0 auto 10px; position:relative; text-align:left;}

.input-prepend .add-on {
		
	background: rgb(146,152,159); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzkyOTg5ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZjQzNDYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(146,152,159,1) 0%, rgba(63,67,70,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(146,152,159,1)), color-stop(100%,rgba(63,67,70,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(146,152,159,1) 0%,rgba(63,67,70,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(146,152,159,1) 0%,rgba(63,67,70,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(146,152,159,1) 0%,rgba(63,67,70,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(146,152,159,1) 0%,rgba(63,67,70,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92989f', endColorstr='#3f4346',GradientType=0 ); /* IE6-8 */


	border-right:1px solid #606469;
	border-top:1px solid #A5ADB4;
	border-left:1px solid #606469;
	border-bottom:1px solid #2C2E30;
	color:#292B2D;
	text-shadow: #81878C 0 1px 0;

}

form#login div.input-prepend .add-on {z-index:5; position:absolute; left:0; top:0; line-height:30px;}

form#login div.input-prepend .add-on i {font-size:30px; 
	display: block;
	text-align:center;
	width: 100%;
	line-height:40px;
}

form#login div.input-prepend input.span2 {border-radius:10px 3px 3px 10px; padding:0; box-sizing: border-box; moz-box-sizing: border-box; width:100%; text-indent:70px;}

form#login .keep-me-logged-in input {width:inherit; margin:0 3px 0 0; height:40px; line-height:40px;}

form#login .login-box {width:50%; margin:0 auto; text-align:right;}

form#login .login-box .login {width:100%; padding:15px; height: 60px; border-radius: 6px;}

label.keep-me-logged-in {font-size:14px;}

form#login .login-box #show_reset {font-weight:normal; background:transparent; text-shadow:rgba(0, 0, 0, 0.5) 0 1px 1px; border:none; margin:10px 0 0 0; opacity:0.8; box-shadow:none;}


.legal-text {
	display:none;
	color:black; font-size:14px; text-shadow:rgba(255,255,255,0.3); color:rgba(0,0,0,0.5); padding-top:20px; font-weight:normal; width:90%; margin:10px auto 0; text-shadow:rgba(255,255,255,0.2) 0 1px 0; text-align:justify;
}
























/* prev admin */


#previous_admin {
margin:0 auto 5px; border:4px solid white; width:100px; height:100px; box-shadow: rgba(0,0,0,0.2) 0 2px 2px; border-radius:100px; overflow:hidden;
}


#previous_admin img {vertical-align:middle; margin:0 10px 0 0;}

.show-users, .show-users:visited {
display:inline-block; text-align:center; margin:20px 0; color:white; font-size:14px; text-shadow:rgba(0,0,0,0.5) 0 1px 1px;
}


.show-users:hover {
color:rgba(255,255,255,0.8);
}

#reset_password, #finish_reset {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(34,46,51,0.6);
	z-index: 9999;
	display: none;
}

#reset_password form, #finish_reset form {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50%;
	margin: -25% 0 0 -25%;
	background: whiteSmoke;
	border-radius: 5px;
	box-shadow: 0 3px 20px rgba(0,0,0,0.5);
	padding: 10px;
	text-align: center;
}
#reset_password form h2, #finish_reset form h2 {
	margin-top:0;
	margin-bottom: 15px;
	border-bottom:1px solid rgba(0,0,0,0.08);
}
#reset_email {
	width: 71%;
	margin-bottom: 15px;
}

#show_reset {font-size:13px; color:rgba(255,255,255,0.8); padding:5px 0 0 0; display:block;}

#password-pane div.login-box button.btn.btn-large.btn-primary.login {
 
	background: rgb(146,152,159); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzkyOTg5ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZjQzNDYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(146,152,159,1) 0%, rgba(63,67,70,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(146,152,159,1)), color-stop(100%,rgba(63,67,70,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(146,152,159,1) 0%,rgba(63,67,70,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(146,152,159,1) 0%,rgba(63,67,70,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(146,152,159,1) 0%,rgba(63,67,70,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(146,152,159,1) 0%,rgba(63,67,70,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92989f', endColorstr='#3f4346',GradientType=0 ); /* IE6-8 */


	border-right:1px solid #606469;
	border-top:1px solid #A5ADB4;
	border-left:1px solid #606469;
	border-bottom:1px solid #2C2E30;
	color:#ffffff;
	text-shadow: #333 0 -1px 0;
	font-weight:bold;
	font-size:26px;

}


/*-------------------------------------------------------------------
Things for flash() to work
--------------------------------------------------------------------*/

@-webkit-keyframes slideDown {
  0%   {
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
  }
  100%   {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
  }
}
@-webkit-keyframes slideUp {
  0%   {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
  }
  100%   {
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
  }
}

@-moz-keyframes slideDown {
  0%   {
    opacity: 0;
    -moz-transform: rotateX(-90deg);
  }
  100%   {
    opacity: 1;
    -moz-transform: rotateX(0deg);
  }
}
@-moz-keyframes slideUp {
  0%   {
    opacity: 1;
    -moz-transform: rotateX(0deg);
  }
  100%   {
    opacity: 0;
    -moz-transform: rotateX(-90deg);
  }
}

@-o-keyframes slideDown {
  0%   {
    opacity: 0;
    -o-transform: rotateX(-90deg);
  }
  100%   {
    opacity: 1;
    -o-transform: rotateX(0deg);
  }
}
@-o-keyframes slideUp {
  0%   {
    opacity: 1;
    -o-transform: rotateX(0deg);
  }
  100%   {
    opacity: 0;
    -o-transform: rotateX(-90deg);
  }
}

#notification-wrapper {
  pointer-events:none;
	z-index:9999;
  position: fixed;
  top: 3px;
  left: 50%;
  width: 50%;
  margin-left:-25%;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}
#notification-wrapper .notification {
  text-shadow: white 0 1px 0;
  display: block;
  text-decoration: none;
  width: 100%;
  overflow: hidden;
  margin: 0 auto 4px auto;
    -webkit-transform-origin: center top;
    -moz-transform-origin: center top;
    -o-transform-origin: center top;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      -o-border-radius: 6px;
      border-radius: 6px;
        background: #ffffff; /* Old browsers */
        background: -moz-linear-gradient(top,  #ffffff 0%, #e6e6e6 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #ffffff 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #ffffff 0%,#e6e6e6 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #ffffff 0%,#e6e6e6 100%); /* IE10+ */
        background: linear-gradient(top,  #ffffff 0%,#e6e6e6 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
          box-shadow: 0 -1px 0 #FFF inset, 0px 10px 20px rgba(0,0,0,0.2);
}
#notification-wrapper .notification.clickable {
  cursor: pointer;
}
#notification-wrapper.clickable {
  pointer-events:auto;
}
#notification-wrapper .notify-icon {
  margin:0 !important;
  display: inline-block;
  width: 41px;
  height: 41px;
  float: left;
  line-height:42px;
  text-align:center;
  font-size:32px;
  color: #333;
  background-size:cover; 
  background-position:center center;
}
#notification-wrapper .notify-text {
  border-left:1px solid #ddd;
  padding-left:5px;
  display:block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333333;
  overflow: hidden;
}
#notification-wrapper .notify-title {
  font-weight: bold;
  font-size: 14px;
  height: 14px;
  display: block;
  padding: 3px 0 0 0;
  text-transform: capitalize;
}
#notification-wrapper .notify-message {
  font-size: 12px;
  padding:4px 0 4px;
  display: block;
}
#notification-wrapper .animate-in {
  -webkit-animation: slideDown 300ms;
  -moz-animation: slideDown 300ms;
  -o-animation: slideDown 300ms;
}
#notification-wrapper .animate-out {
  -webkit-animation: slideUp 300ms;
  -moz-animation: slideUp 300ms;
  -o-animation: slideUp 300ms;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  #notification-wrapper .notification {
    width: 100%;
  }
}
#notification-wrapper .notification .notify-icon.icon-custom {
  box-shadow:rgba(255,255,255,0.5) 0 -1px 1px inset;
}
#notification-wrapper .notification .notify-icon.icon-custom + .notify-text {
  border-left:0;
}
#notification-wrapper .notification .notify-icon.icon-warn {
  background: transparent url(../assets/images/warn.png) center center no-repeat;
  background-size:auto;
}
#notification-wrapper .notification .notify-icon.icon-success {
  background: transparent url(../assets/images/success.png) center center no-repeat;
  background-size:auto;
}
#notification-wrapper .notification .notify-icon.icon-error {
  background: transparent url(../assets/images/error.png) center center no-repeat;
  background-size:auto;
}
#notification-wrapper .notification .notify-icon.icon-notice {
  background: transparent url(../assets/images/notice.png) center center no-repeat;
  background-size:auto;
}
#notification-wrapper .notification .notify-icon.icon-help {
  background: transparent url(../assets/images/help.png) center center no-repeat;
  background-size:auto;
}
/*-------------------------------------------------------------------
End things for flash() to work
--------------------------------------------------------------------*/