.report_panel {
	height: 0px;
	overflow: visible;
	position: fixed;
	text-align: center;
	top: 0px;
	visibility: visible;
	width: 100%;
	z-index: 3000;

	a {
		text-shadow: none;
		white-space: nowrap;
	}

	&.error {
		z-index: 2999;
	}
	
	&.hide {
		visibility: hidden;
	}
	
	.csstransitions & {
		.perspective(200px);
		
		.transition(~"visibility 0ms linear 0ms");
		
		&.hide {
			.transition(~"visibility 0ms linear 500ms");
		}
	}
	
	.content {
		background: #f9f9f9;
		border: 1px solid #c3c3c3;
		border-top: 0px;
		border-radius: 0px 0px 4px 4px;
		box-shadow: 0px 1px 2px 0px #bbb;
		display: inline-block;
		font-weight: bold;
		max-width: 20%;
		padding: 15px 30px 10px;
		text-align: left;
		text-shadow: 0px 1px 2px rgba(0,0,0,0.4);
		
		.opacity(1);
		
		@media screen and (max-width: 768px) {
			max-width: 80%;
		}

		.csstransitions & {
			.transform(rotateX(0deg));

			-webkit-transform-origin: 0px 0px;
			-moz-transform-origin: 0px 0px;
			-o-transform-origin: 0px 0px;
			transform-origin: 0px 0px;

			.transition(all 200ms ease 0s);
		}
		
		.hide& {
			.opacity(0);

			.csstransitions & {
				.transform(rotateX(-90deg));
				.transition(all 200ms ease 0s);
			}
		}
		
		.loading& {
			color: #ffffff;
			background: #dac073;
			border-color: #c5ac60;

			a {
				color: #332808;
			}
		}
		
		.report& {
			color: #ffffff;
			background: #96c671;
			border-color: #82b35d;
		}
		
		.error& {
			color: #ffffff;
			background: #f47474;
			border-color: #e26464;
		}
		
		.report&, .error& {
			.close {
				cursor: pointer;
				height: 16px;
				position: absolute;
				right: 2px;
				top: 2px;
				width: 16px;
				
				.init-icon-font();
				
				&:before {
					content: "\e63e";
					display: inline-block;
					font-size: 16px;
				}
			}
		}

		.gray& {
			background: #cccccc;
			border-color: #a9a9a9;
		}

		.icon {
			display: none;
			float: left;
			height: 17px;
			margin-left: -23px;
			width: 16px;
		}
	}
}
