div.ss-wrap *{}

input.ss-input
{
	display: block;
    background-image: url(../png/search.png);
	background-repeat: no-repeat;
	background-position: center right 5px;
}

input.ss-input-thinking {
	background-image: url(../gif/blue-spinner.gif);
	background-repeat: no-repeat;
	background-position: 97% 50%;
}

ul.ss-box {
	/* Will be absolutely positioned in the JavaScript */
	margin: 0 !important;
	padding: 0 !important;
	width: 81%;
	min-width: 200px;
	z-index: 999999;
	font-size: 11px;
	background: #fff;
	-moz-box-shadow: 2px 2px 5px 0 #c5c5c5;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
	list-style: none;
	max-height: 330px;
	overflow-x: hidden;
	overflow-y: scroll;
}
	
	ul.ss-box li
	{
		float: left;
		width: 100%;
		clear: both;
	}
	
	ul.ss-box li,
	ul.ss-box li *
	{
		cursor: pointer;
	}

	ul.ss-box li.ss-header
	{
		height: 28px;
		overflow: hidden;
	    padding: 0 0 10px 0;
		/*color: #fff;
		background: #777;*/
		color: #424242;
		font-weight: 600;
		border-bottom: 1px solid #dadada;
	}

		ul.ss-box li.ss-header p.ss-header-text
		{
			margin: 0 !important;
			padding: 3px 0 0 10px !important;
			float: left;
			font-size: 12px;
		}

		ul.ss-box li.ss-header p.ss-header-limit {
			margin: 0 !important;
			padding: 2px 10px 0 0 !important;
			float: right;
			font-size: 10px;
			font-weight: normal;
			position: relative;
			top: 3px;
			font-weight: 600;
		}

	ul.ss-box li.ss-result
	{
		margin: 0 !important;
		padding: 0 !important;
		border-bottom: 1px solid #c5c5c5;
	}

		ul.ss-box li.ss-result a
		{
			display: block;
			padding: 5px 10px;
			text-decoration: none !important;
			background: #fff;
		}

		ul.ss-box li.ss-result a:hover {
			/*background: #cde0ff url(../images/search-item-hover.gif) repeat-x top;*/ /* Also is set in JavaScript file for IE6 compatibility */
			background-color: rgba(131, 170, 241, 0.25);
		}

		ul.ss-box li.ss-result img {
			margin-top: 10px;
			margin-right: 12px;
			height: 60px !important;
			width: 60px !important;
			border-radius: 3px;
			box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3)
		}

		ul.ss-box li.ss-result p
		{
			margin: 0 !important;
			padding: 0 !important;
			color: #444;
			font-weight: normal;
			font-size: 11px;
		    line-height: 15px;
		}

		ul.ss-box li.ss-result p span.ss-result-title
		{
			display: inline !important;
			margin-left: 20px;
            margin-top: 20px;
			font-size: 12px;				
			color: #424242;
			font-weight: 700;
		}

		ul.ss-box li.ss-result td {
			vertical-align: middle;
		}
::placeholder {
	color: #dadada;
	opacity: 1; /* Firefox */
}
@media screen and (min-width: 1200px) {
	.filler-col {
		display: none;
	}
	ul.ss-box {
		width: 84%;
	}
}

@media screen and (max-width: 1200px) {
	.milestones-content h3 {
		font-size: 18px;
	}
}

@media screen and (max-width: 1080px) {
	.filler-col {
		display: none;
	}
	ul.ss-box {
		width: 81%;
	}
}

@media screen and (max-width: 991px) {

	.main-trophy-container {
		 padding-top: 0px; 
	}
	.main-trophy {
		width: 60%;
	}

	#selectChannelArea {
		padding: 50px 30px !important;
	}

	ul.ss-box {
		left: 160px;
		width: 55%;
	}

	.milestones-input {
		width: 60%;
	}

	#selectedChannelArea {
		margin: 40px 0px;
	}

	.selected-channel-info {
		text-align:center;
	}

	.recent-milestones {
		margin-top: 60px;
	}
		.recent-milestones h3 {
			font-size: 2.5rem;
		}

		.recent-milestones h4 {
			font-size: 2.5rem;
		}

	.recent-milestones-title {
		margin-bottom: 40px;
		text-align:center;
	}

	.recent-milestones-value {

	}
	.recent-milestones-value {

	}

	.filler-col {
		display: block!important;
	}
}

@media screen and (max-width: 768px) {
	.install-btn-container {
		display: none
	}
	#selectChannelArea {
		padding: 0px 30px 50px !important;
	}
	ul.ss-box {
		left: 50px;
		width: 77%;
	}
	.main-trophy-container {
		padding-bottom: 25px;
	}
	.main-trophy {
		width: 90%;
	}
	.milestones-title {
		text-align: center;
	}
	.milestones-input {
		width: 90%;
	}
	.recent-milestones h3 {
		font-size: 2.2rem;
	}
	.recent-milestones h4 {
		font-size: 2rem;
	}
	.filler-col {
		display: block!important;
	}
}

@media screen and (max-width: 480px) {
	#selectChannelArea h3 {
		font-size: 18px!important;
	}
	.milestones-input {
		width: 100%;
	}
	.recent-milestones-title {
		margin-bottom: 30px;
	}
	.recent-milestones h3 {
		font-size: 2rem;
	}
	.recent-milestones h4 {
		font-size: 1.5rem;
	}
	.recent-milestones-value {
		font-size: 13px;
	}
	.recent-milestones-type {
		font-size: 13px;
	}
	.filler-col {
		display: block!important;
	}
}