@import "variables";
.tv-que {
	max-width: 700px;
	margin: 0 auto;
}

.b-ques {
	font-size: 64px;
	@media (max-width: 991px){ font-size: 48px; }
	@media (max-width: 767px){ font-size: 36px; }
	@media (max-width: 575px){ font-size: 24px; }
	.b-ques__head {
		position: relative;
		overflow: hidden;
		padding: 12px 24px 4px;
		font-size: .5em;
		@media (max-width: 767px){ padding: 12px 12px 4px; }
		@media (max-width: 575px){  }
		font-weight: bold;
		line-height: normal;
		text-transform: uppercase;
		color: $color_white;
		.b-ques__col {
			float: left;
			&:first-child {
				width: 225px;
				@media (max-width: 991px){ width: 185px; }
				@media (max-width: 767px){ width: 150px; }
				@media (max-width: 575px){ width: 90px; }
			}
		}
	}
	.b-ques__row {
		background: $color_white;
		position: relative;
		overflow: hidden;
		margin-top: 10px;
		padding: 12px 24px;
		@media (max-width: 767px){ padding: 12px; }
		line-height: 1em;
		color: $color_black;

		white-space: nowrap;

		&:before {
			content: '';
			position: absolute; top: 0; right: 0px; bottom: 0px;
			z-index: 2;
			display: block; width: 48px;

			background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
			background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
			background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
		}

		.b-ques__col {
			display: inline-block;
			vertical-align: middle;
			& + .b-ques__col {
				margin-left: 24px;
				@media (max-width: 575px){ margin-left: 12px; }
			}
		}

		.b-ques__number {
			font-size: 1em;
			font-weight: 900;
		}
		.b-ques__arrow {
			img { display: block; height: .5em; }
		}
		.b-ques__cashier {
			font-size: 1em;
			font-weight: 900;
		}
		.b-ques__userpic {
			img {
				display: block;
				height: 1em;
				@include border-radius(50%);
			}
		}
		.b-ques__username {
			position: relative;
			overflow: hidden;
			//max-width: 240px;
			font-size: .5em;
			font-weight: bold;
			white-space: nowrap;
			text-overflow: ellipsis;
			@media (max-width: 991px){  }
			@media (max-width: 767px){  }
		}
	}
}

.tv-quene-list {
	position: relative;
	overflow: hidden;
	margin-right: -24px;
	padding: 24px 0 24px 15%;
	font-size: 60px;
	@media (max-width: 1199px){ padding-left: 0px; font-size: 48px; }
	@media (max-width: 767px){ font-size: 36px; }
	ul {
		margin: 0; padding: 0; list-style: none;
		white-space: nowrap;
		li {
			display: inline-block;
			vertical-align: middle;
			font-weight: bold;
			color: $color_white;
			& + li { margin-left: 1em; }
			img {
				display: block;
				width: 1em; height: 1em;
			}
		}
	}
}