/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body {
	background-color: #e3e3d9;
	font-size: .85em;
	font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
	margin: 0;
	padding: 0;
	color: #696969;
}

a:link {
	color: #034af3;
	text-decoration: underline;
}

a:visited {
	color: #505abc;
}

a:hover {
	color: #1d60ff;
	text-decoration: none;
}

a:active {
	color: #12eb87;
}

p, ul {
	margin-bottom: 20px;
	line-height: 1.6em;
}

img 
{
	border: 0;
}

.right 
{
	float: right;
}
.center {
	text-align:center;
}

.left 
{
	float:left;
}

.clear
{
	 clear: both;
}
.fontbold {
	font:bold;
}
.large
{
	font-size: 18px;
}
.Large
{
	font-size: 18px;
	color:red;
	}
.whitebackground 
{
	background-color:white;
}
.redtextcolorandwhitebg {
	color:red;
	background-color:white;
}
.textredcolor
{
	color:red;
}
.italic 
{
	font-style:italic;
	
}
.x-small
{
	 font-size: 10px;
}

.row
{
	background-color: #fff;
}

.rowAlt
{

}

.headerRow
{
	background-color: #91bd09;
}

header,
footer,
nav,
section {
	 display: block;
}

.faded { font-style: italic; color: silver; }

.hidden { display: none; }

/* HEADINGS   
----------------------------------------------------------*/
.heading 
{
	font-size: 1.5em;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 1.5em;
	color: #000;
}

h1 {
	font-size: 2em;
	padding-bottom: 0;
	margin-bottom: 0;
}

h2 {
	padding: 0 0 0 0;
	color: #b2b2a6;
	text-shadow: -1px -1px #FFF,1px 1px #e3e3d9;
}

h3 {
	font-size: 1.2em;
}

h4 {
	font-size: 1.1em;
}

h5, h6 {
	font-size: 1em;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page
{
	 width: 1080px;
	 margin: 0 auto;
}
.pagemobile{
	 width: 200px;
	  margin: 0 auto;
}
header, #header {
	position: relative;
	color: #fff;
	padding: 0;	
	background-image: url(images/header-background.png);
	background-repeat: repeat-x;
	height: 70px;
}


header h1, #header h1 {
	font-weight: bold;
	margin: 0;
	color: #fff;
	border: none;
	font-size: 32px !important;
	text-shadow: 1px 1px 2px #111;
}

#main {
	padding: 10px 30px 30px 30px;
	margin-bottom: 30px;
	background-color: #f4f5f0;
	-moz-box-shadow: 0 5px 5px #d1d1d1;
	-webkit-box-shadow: 0 5px 5px #d1d1d1;
	box-shadow: 0 5px 5px #d1d1d1;
}

#sideMain 
{
	padding: 10px 10px 10px 10px;
	margin-bottom: 30px;
	background-color: #f4f5f0;
	-moz-box-shadow: 0 5px 5px #d1d1d1;
	-webkit-box-shadow: 0 5px 5px #d1d1d1;
	box-shadow: 0 5px 5px #d1d1d1;
}

.sideContent 
{
	padding: 10px 10px 10px 10px;
	margin-bottom: 30px;
	background-color: #f4f5f0;
	-moz-box-shadow: 0 5px 5px #d1d1d1;
	-webkit-box-shadow: 0 5px 5px #d1d1d1;
	box-shadow: 0 5px 5px #d1d1d1;
}

footer, 
#footer {
	color: #999;
	padding: 10px 0;
	text-align: center;
	line-height: normal;
	margin: 0 0 30px 0;
	font-size: .9em;
}

/* TAB MENU   
----------------------------------------------------------*/
ul#menu {
	padding: 0;
	position: relative;
	margin: 0;
	text-align: right;
}

ul#menu li {
	display: inline;
	list-style: none;
}

ul#menu {
}

ul#menu li a {
	padding: 27px 15px 20px 15px;
	font-weight: bold;
	text-decoration: none;
	line-height: 5em;
	color: #fff;
	font-size: .9em;
}

ul#menu li a:hover {
	background-color: #e3e3d9;
	background-image: none;
	color: #e48414;
	text-decoration: none;
}

ul#menu li a:active {
	background-color: #e3e3d9;
	text-decoration: none;
}

ul#menu li.selected a {
	color: #e48414;
	background-image: url(images/menu-selected.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}

/* TAB MENU   
----------------------------------------------------------*/

ul.tabMenu
{
	padding: 0;
	position: relative;
	margin: 0;
	text-align: left;
	float: right;
	top: -25px;
}

ul.tabMenu li
{
		display: inline;
		list-style: none;
}

ul.tabMenu li a
{
		border-top: 1px solid #CCCCCC;
		border-left: 1px solid #CCCCCC;
		border-right: 1px solid #CCCCCC;

		padding: 7px 20px;
		font-weight: bold;
		text-decoration: none;
		line-height: 2.35em;
		
		background-color: #fff;
		color: #000;
		
}

ul.tabMenu li a:hover
{
		background-color: #fff;
		text-decoration: none;

}

ul.tabMenu li a:active
{
		background-color: #fff;
		text-decoration: none;

}

ul.tabMenu li.selected a
{
		background-color: #f5f5f5;
		color: #333;		
}

/* SUB MENU   
----------------------------------------------------------*/
ul.subMenu
{
		padding: 0;
		position: relative;
		margin: 0;
		text-align: left;
}

ul.subMenu li
{
		display: inline;
		list-style: none;
}

ul.subMenu li a
{
		border-top: 1px solid #CCCCCC;
		border-left: 1px solid #CCCCCC;
		border-right: 1px solid #CCCCCC;

		padding: 7px 20px;
		font-weight: bold;
		text-decoration: none;
		line-height: 2.35em;
		background-color: #f5f5f5;
		color: #333;
}

ul.subMenu li a:hover
{
		background-color: #fff;
		text-decoration: none;

}

ul.subMenu li a:active
{
		background-color: #fff;
		text-decoration: none;

}

ul.subMenu li.selected a
{
		background-color: #fff;
		color: #000;
		
}

/* REPORT MENU   
----------------------------------------------------------*/
.reportMenu
{
	 margin: 0 2px 0 0;
	 padding: 5px 10px 5px 10px;
	 font-weight: bold;
	 background-color: #91bd09;
	 color: #FFFFFF;
	 border-radius: 15px 15px 0 0;
	 -webkit-border-radius: 15px 15px 0 0;
	 -moz-border-radius: 15px 15px 0 0;
	 float: left;
}

.reportMenu:hover
{
	 cursor: pointer;
	 background-color: #41A1C9;
	 text-decoration: none;
	 color: #FFFF00;
}

.reportMenu.selected
{
	 cursor: pointer;
	 background-color: #41A1C9;
	 text-decoration: none;
	 color: #FFFFFF;
}

.reportMenuOptions
{
	 -webkit-border-radius: 15px;
	 -moz-border-radius: 15px;
	 border-radius: 15px;

	 padding: 10px;
	 background-color: #41A1C9;
	 color: #FFFFFF;
	 clear: left;
}






/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

.boxInputDisabled
{
	 background-color: #fff;
	 border: 1px solid #ccc;
	 padding: 2px 5px 2px 5px;
	 color: #999999;
	 font-size: 1.2em;
	 margin-top: 10px;
	 width: 194px;
	 min-height: 22px;
}

.boxError
{
	 border: 1px solid Red;
	 padding: 15px;
	 background-color: #FFC1C1;
	 color: Red;
	 margin-bottom: 20px;
}

.boxMessage
{
	 border: 1px solid #72930C;
	 padding: 15px;
	 background-color: #D9E8AA;
	 color: Green;
	 margin-bottom: 20px;
}

fieldset {
	 border: 1px solid #ddd;
	 padding: 0 1.4em 1.4em 1.4em;
	 margin: 0 0 1.5em 0;
}

legend {
	 font-size: 1.2em;
	 font-weight: bold;
}

textarea {
	 min-height: 75px;
}

input[type="text"], 
input[type="email"],
input[type="password"] {
	border: 1px solid #ccc;
	padding: 2px;
	font-size: 1.2em;
	color: #444;
	width: 200px;
}

input[type="text"].datepicker {
	width:35%;
}

input[type="text"].large {
	width: 30em;
}

select {
	border: 1px solid #ccc;
	padding: 2px;
	font-size: 1.2em;
	color: #444;
}

input[type="submit"] {
	font-size: 1.2em;
	padding: 5px;
}

/* TABLE
----------------------------------------------------------*/

table {
	border-collapse: collapse;
	width: 100%;
	table-layout:fixed;
}

table td {
	padding: 10px;
}

table th {
	padding: 10px;
	text-align: left;
	border-bottom: 1px solid #e2e2e2;
	background-color: #f5f5f5;
}

table#lineItemsTable td.grid
{
	border: 1px solid #ccc;
	padding: 5px;
}

table.hidden td
{
	 padding: 0 10px 0 0;
	 margin: 0;
	 border-style: none;
}

.list-header {
	 background-color: #999999;
	 color: #FFFFFF;
	 font-weight: bold;
}


/* MISC  
----------------------------------------------------------*/
.clear {
	 clear: both;
}

.error { color: Red; }
.highlight { color: Blue; }

nav, 
#menucontainer {
	 margin-top: 40px;
}

div#title {
	 display: block;
	 float: left;
	 text-align: left;
}

#logindisplay
{
	 font-size: 1.1em;
	 display: block;
	 text-align: right;
	 margin: 10px;
	 color: #E9E9E9;
}

#logindisplay a:link {
	 color: #E9E9E9;
	 text-decoration: underline;
}

#logindisplay a:visited {
	 color: #E9E9E9;
	 text-decoration: underline;
}

#logindisplay a:hover
{
	 color: #CCCCCC;
	 text-decoration: none;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
	 color: #ff0000;
}

.field-validation-valid {
	 display: none;
}

.input-validation-error {
	 border: 1px solid #ff0000;
	 background-color: #ffeeee;
}

.validation-summary-errors {
	 font-weight: bold;
	 color: #ff0000;
}

.validation-summary-valid {
	 display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label, 
.editor-label {
	margin: 1em 0 0 0;
	font-weight: bold;
}

.display-field, 
.editor-field {
	margin: 0.5em 0 0 0;
}

.text-box {
	width: 25em;
}

.text-box.multi-line {
	height: 6.5em;
}

.tri-state {
	width: 6em;
}

input[type='text'].timetb { width: 30px; }

.underline
{
	border-bottom: 1px dashed #CCCCCC;
}

p.buttons
{
	border-top: 1px dashed #CCCCCC;
	padding-top: 12px;
}

/* CSS Buttons */
/* Buttons */

.button {	display: inline-block; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.button {
	white-space: nowrap;
	line-height:1em;
	position:relative;
	outline: none;
	overflow: visible; /* removes extra side padding in IE */
	cursor: pointer;
	border: 1px solid #999;/* IE */
	border: rgba(0, 0, 0, .2) 1px solid;/* Saf4+, Chrome, FF3.6 */
	border-bottom:rgba(0, 0, 0, .4) 1px solid;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	background: -moz-linear-gradient(
		center top,
		rgba(255, 255, 255, .25) 0,
		rgba(0, 0, 0, .25) 100%
	);/* FF3.6 */
	background: -webkit-gradient(
		linear,
		center bottom,
		center top,
		from(rgba(0, 0, 0, .25)),
		to(rgba(255, 255, 255, .25))
	);/* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#40FFFFFF', EndColorStr='#40000000'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#40FFFFFF', EndColorStr='#40000000')"; /* IE8 */
	-moz-user-select: none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	user-select:none;
	margin-bottom:10px;
}
.button.full { display: block; }
.button:hover, .button.hover { background: -moz-linear-gradient(center top,	rgba(255, 255, 255, .2) 0,	rgba(255, 255, 255, .1) 100%);/* FF3.6 */
	background: -webkit-gradient(linear, center bottom, center top, from(rgba(255, 255, 255, .1)), to(rgba(255, 255, 255, .2)) );/* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */
}
.button:active, .button.active { top:1px; }
.button { position:relative; color:#fff; font-weight:bold; text-shadow:0 1px 1px rgba(0, 0, 0, 0.25); border-top: rgba(255, 255, 255, .2) 1px solid; line-height:1em; text-decoration:none; text-align:center; white-space: nowrap; }
.button { padding:8px 15px; }
.button.inline { padding: 5px 8px; }
.button.x-small { font-size:9px; }
.button.small { font-size:12px; padding: 3px; }
.button.medium { font-size:15px; }
.button.large { font-size:18px; }

.button.black { background-color: #333333; color: #fff; text-decoration: none; }
.button.gray { background-color: #666666; color: #fff; text-decoration: none; }
.button.white { background-color: #FFFFFF; color: #666666; text-decoration: none; }
.button.red { background-color: #e62727; color: #fff; text-decoration: none; }
.button.orange { background-color: #ff5c00; color: #fff; text-decoration: none; }
.button.magenta { background-color: #A9014B; }
.button.yellow { background-color: #ffb515; }
.button.blue { background-color: #00ADEE; color: #fff; text-decoration: none; }
.button.pink { background-color: #e22092; }
.button.green { background-color: #91bd09; color: #fff; text-decoration: none; }
.button.rosy { background-color: #F16C7C; }
.button.brown { background-color: #804000; }
.button.purple { background-color: #800080; }
.button.cyan { background-color: #46C7C7; }
.button.gold { background-color: #D4A017; }
.button.silver { background-color: Silver; color: #fff; text-decoration: none; }

.button.log-width { width: 30px; }
.button.counter-width { min-width: 85px; }
.button.counter-running { background-color: #91bd09; }
.button.counter-stopped
{
	/*background-color: #7A894B;*/
	/*color: #CCCCCC;*/
	background-color: #91bd09;
}
.button.counter-paused
{
	background-color: #EC3413;
	text-decoration: blink;
}

.button img { border: 0; float: left; margin-right: 5px; }

.cyan { background-color: #e22092; }

.button#logCounter, .button#submitLogButton {
	padding: 5px;
}

/* BB Tables
----------------------------------------------------------*/
.table-detail
{
	 background-color: #FCFCFC;
	 white-space: nowrap;
}

.table-detail:hover
{
	 cursor: pointer;
	 background-color: #BCE9FA;
}
	 
.table-hidden
{
	 padding: 0 10px 0 0;
	 margin: 0;
	 border-style: none;
}

.timeLog
{
	 background-color: #3366CC;
	 font-weight: bold;
	 color: #FFFFFF;
}


/* BB Inline editting
----------------------------------------------------------*/
.inline-editor
{
	 vertical-align: top;
	 background-color: #D7F1FB;
}

.inline-editor input
{
  width: 100%;   
}

.inline-editor input.datetimepicker
{
  width: 80px;
}



.inline-controls
{
	 background-color: #FFFFFF;
	 border-style: solid;
	 border-width: 0;
}

.inline-validation
{
	 font-size: xx-small;
	 color: #990000;
}

/* Time Recorder
-----------------------------------------------------------*/
.table-timer
{
	 padding: 5px 15px 5px 15px;
	 display: inline-block;
	 -webkit-border-radius: 15px;
	 -moz-border-radius: 15px;
	 border-radius: 15px;
	 background-color: #73B9D7;
	 color: #fff;
	 width: 100%;
}
.table-timer td
{
	 border: none; /* 1px solid #FF0000; */
	 text-align: left;
	 white-space: nowrap;
	 padding-top: 10px;
	 padding-bottom: 10px;
}
.table-timer input
{
	 width: 100%;   
}
.table-timer select
{
	 width: 150px;
}

/*
.counter
{
	 border: 1px outset #CCCCCC;
	 display: inline-block;
	 -webkit-border-radius: 4px;
	 -moz-border-radius: 4px;
	 border-radius: 4px;
	 background: -moz-linear-gradient(
		center top,
		rgba(255, 255, 255, .25) 0,
		rgba(0, 0, 0, .25) 100%
	  ); 
	 float: left;
	 font-size: medium;
	 padding: 5px;
}
.counter:hover { color: #FFFF00; cursor: pointer; }
.counter-running { background-color: #91bd09; }
.counter-paused { background-color: #990000; text-decoration: blink; }
*/

.logList
{
	 border: none; /* 1px solid #0000CC;  */
	 margin-left: 65px;
	 width: 850px;
}
 .logList h1
{
	 color: #000;
	 font-size: large;
	 padding-top: 10px;
}
 
.logDisplay
{
	 -webkit-border-radius: 10px;
	 -moz-border-radius: 10px;
	 border-radius: 10px;
	 background: -moz-linear-gradient(
		center top,
		rgba(255, 255, 255, .25) 0,
		rgba(0, 0, 0, .25) 100%
	  ); /* FF3.6 */
	 background-color: #CCCCCC;
	 white-space: nowrap;
	 font-size: small;
}

.logDisplay:hover
{
	 cursor: pointer;
	 background-color: #A9CA43;
}
 
.logEdit
{
	 -webkit-border-radius: 10px;
	 -moz-border-radius: 10px;
	 border-radius: 10px;
	 
	 background: -moz-linear-gradient(
		center top,
		rgba(255, 255, 255, .25) 0,
		rgba(0, 0, 0, .25) 100%
	  ); /* FF3.6 */
	 vertical-align: top;
	 background-color: #A9CA43;
}

.logEdit input
{
  width: 100%;   
}

.logEdit input.datetimepicker
{
  width: 80px;
}
 
/* jQuery UI autocomplete - spinner icon when loading data
/* .ui-autocomplete-loading { background: white url('/Content/images/ui-anim_basic_16x16.gif') right center no-repeat; } */
 

.funkyButton
{
	 border: 1px outset #CCCCCC;
	 display: inline-block;
	 -webkit-border-radius: 4px;
	 -moz-border-radius: 4px;
	 border-radius: 4px;
	 background: -moz-linear-gradient(
		center top,
		rgba(255, 255, 255, .25) 0,
		rgba(0, 0, 0, .25) 100%
	  ); /* FF3.6 */
	 float: left;
	 font-size: medium;
	 font-weight: normal;
	 padding: 5px;
	 color: #333333;
}
.funkyButton.noborder
{
	 margin: 1px;
	 border: none;
	 background: none;
}
.funkyButton.green { background-color: #A0C13A; }


div.rounded
{
	 border: 2px solid #75BAD7;
	 -webkit-border-radius: 10px;
	 -moz-border-radius: 10px;
	 border-radius: 10px;
	 width: 204px;
	 text-align: center;
	 float: left;
	 margin-right: 6px;
	 font-weight: bold;
	 margin-bottom: 15px;
	 background-color: #DEEEF5;
	 padding-top: 20px;
	 padding-bottom: 20px;
}

.pageResponseMessage
{
	padding-left: 10px;
	color: #668606;
	font-weight: bold;
	display: none; /**/
}

.pageResponseMessageContainer
{
	border-left: solid 10px #668606;
}

/* jQuery showLoading */
.loading-indicator {
	height: 80px;
	width: 80px;
	background: url( 'images/loading.gif' );
	background-repeat: no-repeat;
	background-position: center center;
}

.loading-indicator-overlay {
	background-color: #FFFFFF;
	opacity: 0.6;
	filter: alpha(opacity = 60);
}



/* for testing */
.noBorder td
{
	 border: none; /* 1px solid #FF0000; */
}

.showBorder
{
	 border: 1px solid red;
}
.x { border: 1px solid red; }
.x.blue { border: 1px solid blue; }
.x.green { border: 1px solid green; }
.x.fat { border-width: 3px; }
.table-report {
	width:100%;
	table-layout:fixed;
}

/*power tip jquery*/
#powerTip {
	 cursor: default;
	 background-color: #333;
/* fallback for browsers that dont support rgba */
	 background-color: rgba(0,0,0,0.8);
	 border-radius: 6px;
	 color: #FFF;
	 display: none;
	 padding: 10px;
	 position: absolute;
	 white-space: nowrap;
	 z-index: 2;
}

#powerTip.n:before,#powerTip.e:before,#powerTip.s:before,#powerTip.w:before,#powerTip.ne:before,#powerTip.nw:before,#powerTip.se:before,#powerTip.sw:before {
	 content: "";
	 position: absolute;
}

#powerTip.n:before,#powerTip.s:before {
	 border-right: 5px solid transparent;
	 border-left: 5px solid transparent;
	 left: 50%;
	 margin-left: -5px;
}

#powerTip.e:before,#powerTip.w:before {
	 border-bottom: 5px solid transparent;
	 border-top: 5px solid transparent;
	 margin-top: -5px;
	 top: 50%;
}

#powerTip.n:before {
	 border-top: 10px solid rgba(0,0,0,0.8);
	 bottom: -10px;
}

#powerTip.e:before {
	 border-right: 10px solid rgba(0,0,0,0.8);
	 left: -10px;
}

#powerTip.s:before {
	 border-bottom: 10px solid rgba(0,0,0,0.8);
	 top: -10px;
}

#powerTip.w:before {
	 border-left: 10px solid rgba(0,0,0,0.8);
	 right: -10px;
}

#powerTip.ne:before,#powerTip.se:before {
	 border-right: 10px solid transparent;
	 border-left: 0;
	 left: 10px;
}

#powerTip.nw:before,#powerTip.sw:before {
	 border-left: 10px solid transparent;
	 border-right: 0;
	 right: 10px;
}

#powerTip.ne:before,#powerTip.nw:before {
	 border-top: 10px solid rgba(0,0,0,0.8);
	 bottom: -10px;
}

#powerTip.se:before,#powerTip.sw:before {
	 border-bottom: 10px solid rgba(0,0,0,0.8);
	 top: -10px;
}

#placement-examples div {
	 text-align: center;
}

#placement-examples input {
	 background-color: #EEE;
	 margin: 10px;
	 padding: 10px 30px;
	 border: none;
}

#placement-examples #east {
	 margin-left: 200px;
}

#mousefollow-examples div {
	 background-color: #EEE;
	 text-align: center;
	 line-height: 400px;
	 margin: 0 auto;
	 height: 400px;
	 width: 600px;
}

#mouseon-examples div {
	 background-color: #EEE;
	 text-align: center;
	 width: 400px;
	 padding: 40px;
}

#powerTip a {
	 color: #00F;
}

#api-examples input {
	 background-color: #EEE;
	 margin: 10px;
	 padding: 10px 30px;
}

/* PAGINATION
----------------------------------------------------------*/
.pagination-table {
 border: none;
}

 .pagination-table td {
  border: none;
 }

 .pagination-table ul {
  list-style: none;
 }

  .pagination-table ul li {
	display: inline;
	margin-left: 5px;
  }

.selected-page {
 font-weight: bold;
 text-decoration: none;
}


/* Absolute Center CSS Spinner */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: visible;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}