@good: #52CB34;
@bad: #EE543A;
@warn: #FFAF0F;
@info: #2C82C9;
@gray: #bbb;

pre{
	padding: 10px;
	border: 1px solid #ccc;
	background: #fefefe
}
pre > code{
	background: transparent;
}
.fd-filter-field{
	padding: 8px;
	font-size: 13px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 5px;
	width: 30%;
	min-width: 300px;
	margin: 30px 0 10px;
}

.fd-key-val-table{
	margin: 20px 0;
	border: 0;
}
.fd-key-val-table .fd-kv-row{
	border: 1px solid #ccc;
	margin-bottom: -1px;
	background: #fff;
}
.fd-key-val-table .fd-kv-row a{
	text-decoration: none;
}
.fd-key-val-table .fd-kv-row a:hover{
	text-decoration: underline;
}
.fd-key-val-table .fd-kv-row:nth-child(even){
	background: #E8E8E8;
}

/*Columns*/
.fd-key-val-table .fd-kv-row > div{
	display: inline-block;
	word-wrap: break-word;
	vertical-align: top;
}

/*Default. Two columns 30% / 70%*/
.fd-key-val-table .fd-kv-row > div:nth-child(1){
	width: 30%;
}

.fd-key-val-table .fd-kv-row > div:nth-child(2){
	width: 70%;
}

/*One columns 100%*/
.fd-key-val-table .fd-kv-row.col-100 > div,
.fd-key-val-table .fd-kv-row.cols-100 > div{
	width: 100%;
}

/*Two columns 50% / 50%*/
.fd-key-val-table .fd-kv-row.cols-50x50 > div{
	width: 50%;
}

/*Two columns 70% / 30%*/
.fd-key-val-table .fd-kv-row.cols-70x30 > div:nth-child(1){
	width: 70%;
}

.fd-key-val-table .fd-kv-row.cols-70x30 > div:nth-child(2){
	width: 30%;
}

/*Three columns 30% / 40% / 30%*/
.fd-key-val-table .fd-kv-row.cols-30x40x30 > div:nth-child(1){
	width: 30%;
}

.fd-key-val-table .fd-kv-row.cols-30x40x30 > div:nth-child(2){
	width: 40%;
}

.fd-key-val-table .fd-kv-row.cols-30x40x30 > div:nth-child(3){
	width: 30%;
}

/*Three columns 30% / 50% / 20%*/
.fd-key-val-table .fd-kv-row.cols-30x50x20 > div:nth-child(1){
	width: 30%;
}

.fd-key-val-table .fd-kv-row.cols-30x50x20 > div:nth-child(2){
	width: 50%;
}

.fd-key-val-table .fd-kv-row.cols-30x50x20 > div:nth-child(3){
	width: 20%;
}

/*Columns code styles*/
.fd-key-val-table .fd-kv-row .fd-kv-code,
.fd-key-val-table .fd-kv-row .fd-kv-code{
	padding: 5px;
	overflow: hidden;
}

/*Within columns styles*/
.fd-key-val-table .fd-kv-row .good,
.fd-key-val-table .fd-kv-row .notsogood,
.fd-key-val-table .fd-kv-row .bad{
	display: inline-block;
	padding: 2px 5px;
	border-radius: 2px;
	color: #fff;
	margin-right: 5px;
}
.fd-key-val-table .fd-kv-row .good{
	background: @good;
}

.fd-key-val-table .fd-kv-row .bad{
	background: @bad;
}
.fd-key-val-table .fd-kv-row .notsogood{
	background: @warn;
}

.fd-key-val-table .fd-kv-row.fd-kv-head{
	background: #3E4651;
	color: #fff;
	border-color: darken(#3E4651, 10%);
	padding: 5px 0;
}

/*Form*/
.fd-form{
	display: block;
	margin: 20px 0;
}
.fd-form .field{
	display: block;
	margin: 10px 0 10px;
}

.fd-form .field label{
	display: block;
	margin: 0 0 5px;
	font-weight: 700;
}

.fd-button-refresh,
.fd-auto-refresh,
.fd-button-delete{
	position: relative;
	display: inline-block;
	padding: 5px 15px;
	font-size: 14px;
	font-weight: 400;
	margin: 0 0 0 15px;
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
	&.active{
		.fastdev-loader{
			position: absolute;
			left: 50%;
			margin-left: -10px;
			top: 50%;
			margin-top: -10px;
			width: 20px;
			height: 20px;
		}
	}
}
.fd-button-refresh{
	color: #2C82C9;
	&:hover{
		background: #2C82C9;
		color: #fff;
	}
	&.active{
		background: #2C82C9;
		color: rgba(255, 255, 255, 0);
	}
}

.fd-button-delete{
	color: @bad;
	float: right;
	&:hover{
		background: @bad;
		color: #fff;
	}
	&.active{
		background: @bad;
		color: rgba(255, 255, 255, 0);
	}
}

.fd-auto-refresh{
	background: transparent;
	padding-left: 0;
	color: #333;
}

.fastdev-ajax-message{
	display: block;
	background: #fff;
	border: 1px solid #aaa;
	border-left-width: 5px;
	padding: 15px;
	margin: 15px 0;
	color: #333;
	&.is-error{
		border-color: #EE543A;
	}
	&.is-success{
		border-color: #2C82C9;
	}
}

.fd-mime-allowed,
.fd-mime-not-allowed{
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	margin-top: 4px;
	margin-right: 10px;
	background: @gray;
}

.fd-mime-allowed{
	background: @good;
}


.fastdev-loader {
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 auto;
	border-radius: 50%;
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	box-shadow: 1px 1px 0px rgb(255,255,255);
	animation: fastdev-loader-animation 690ms infinite linear;
		-o-animation: fastdev-loader-animation 690ms infinite linear;
		-ms-animation: fastdev-loader-animation 690ms infinite linear;
		-webkit-animation: fastdev-loader-animation 690ms infinite linear;
		-moz-animation: fastdev-loader-animation 690ms infinite linear;

	&.dark{
		box-shadow: 1px 1px 0px rgb(96,100,109);
	}
	&.dark-on-light{
		box-shadow: 1px 1px 0px rgb(96,100,109);
		background: #fff;
	}
}



@keyframes fastdev-loader-animation {
	100%{ transform: rotate(360deg); transform: rotate(360deg); }
}

@-o-keyframes fastdev-loader-animation {
	100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
}

@-ms-keyframes fastdev-loader-animation {
	100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes fastdev-loader-animation {
	100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-moz-keyframes fastdev-loader-animation {
	100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
}

/*PHP Info port*/
#phpinfo {margin: 20px auto; background: #fff; width: 100%; }
#phpinfo pre {margin: 0px; font-family: monospace;}
#phpinfo a:link {color: #000099; text-decoration: none; background-color: #ffffff;}
#phpinfo a:hover {text-decoration: underline;}
#phpinfo table {border-collapse: collapse; width: 100%;}
#phpinfo .center {text-align: center;}
#phpinfo .center table { margin-left: auto; margin-right: auto; text-align: left;}
#phpinfo .center th { text-align: center !important; }
#phpinfo td, #phpinfo th { border: 1px solid #000000; font-size: 100%; vertical-align: baseline;}
#phpinfo h1 {font-size: 150%;}
#phpinfo h2 {font-size: 125%;}
#phpinfo .p {text-align: left;}
#phpinfo .e {background-color: #ccccff; font-weight: bold; color: #000000;}
#phpinfo .h {background-color: #9999cc; font-weight: bold; color: #000000; vertical-align: top;}
#phpinfo .v {background-color: #cccccc; color: #000000; word-wrap: break-word; word-break: break-all;}
#phpinfo .vr {background-color: #cccccc; text-align: right; color: #000000;}
#phpinfo img {float: right; border: 0px;}
#phpinfo hr {width: 600px; background-color: #cccccc; border: 0px; height: 1px; color: #000000;}