/* ==========================================================================
   Styles for input text filter
   ========================================================================== */

input.text-filter {
	border: 1px solid #ccc;
	padding: 10px;
	color: #333;
	width: 100%;
	border-radius: 4px;
	display: block !important;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-shadow: none;
}

.filter-controls,
.clear-filter,
.filter-status {
	display: block !important;
	visibility: visible !important;
}

.clear-filter {
	color: #fff;
	background: #900;
	width: 105px;
	text-align: center;
	padding: 4px 2px;
	font-size: .9em;
	margin: 10px 0 0 0;
	cursor: pointer;
	border: 1px solid #700;
	border-radius: 2px;
	float: left;
	text-decoration: none;
	width: 100%;
}

.clear-filter:hover {
	border: 1px solid #700;
}

.filter-status {
	font-size: .9em;
	margin: 15px 7px 5px 2px;
	line-height: 1.4em;
}

.filter-status em {
	background: #f9c9c9;
	background: rgba(240,0,0,.2);
	padding: 2px 3px 2px 2px;
}

input.text-filter::-webkit-input-placeholder {
   color: #555;
   font-weight: normal;
   text-shadow: none;
}

input.text-filter:-moz-placeholder { /* Firefox 18- */
   color: #999;
   font-weight: normal;
   text-shadow: none;
}

input.text-filter::-moz-placeholder {  /* Firefox 19+ */
   color: #999;
   font-weight: normal;
   text-shadow: none;
}

input.text-filter:-ms-input-placeholder {  
   color: #999;
   font-weight: normal;
   text-shadow: none;
}

@media only screen and (min-width: 440px) {
	.clear-filter {
		color: #a00;
		background: #fdfdfd;
		width: 65px;
		text-align: center;
		padding: 4px 2px;
		font-size: .9em;
		margin: 6px 0 0 0;
		cursor: pointer;
		border: 1px solid #fdfdfd;
		border-radius: 2px;
		float: left;
		text-decoration: underline;
	}

	.clear-filter:hover {
		color: #fff;
		background: #900;
	}

	.filter-status {
		float: left;
		padding: 0 15px 0 0;
		margin: 15px 7px 0 2px;
		border-right: 1px solid #333
	}
}

@media only screen and (min-width: 1022px) {
	input.text-filter {
		width: 50%;
	}
}