//colors
$color_black    : #000000;
$color_white    : #ffffff;
$color_gray_90  : lighten($color_black, 10%);//#1a1a1a
$color_gray_80  : lighten($color_black, 20%);//#333333
$color_gray_70  : lighten($color_black, 30%);//#4d4d4d
$color_gray_60  : lighten($color_black, 40%);//#666666
$color_gray_50  : lighten($color_black, 50%);//#808080
$color_gray_40  : lighten($color_black, 60%);//#999999
$color_gray_30  : lighten($color_black, 70%);//#b3b3b3
$color_gray_20  : lighten($color_black, 80%);//#cccccc
$color_gray_10  : lighten($color_black, 90%);//#e6e6e6
$color_gray_05  : lighten($color_black, 95%);//#f2f2f2
$color_gray_03  : lighten($color_black, 97%);//#f6f6f6;

//Project colors
$color_blue       : #007bff;
$color_green      : #2DB92D;
$color_red        : #ea135a;
$color_yellow     : #ffe400;

//mixins
@mixin border-radius($r : 3px){
	-webkit-border-radius: $r;
	-moz-border-radius: $r;
	-ms-border-radius: $r;
	border-radius: $r;
}
@mixin box-shadow($boxshadow : none){
	-webkit-box-shadow: $boxshadow;
	-moz-box-shadow: $boxshadow;
	-ms-box-shadow: $boxshadow;
	box-shadow: $boxshadow;
}
@mixin transition($x : all 0.5s ease-out 0s){
	-webkit-transition: $x;
	-moz-transition: $x;
	-o-transition: $x;
	transition: $x;
}
@mixin transform($transform){
	-webkit-transform: $transform;
	-moz-transform: $transform;
	-ms-transform: $transform;
	-o-transform: $transform;
	transform: $transform;
}
@mixin linear-gradient($t, $b){
	background: $b;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from($t), to($b));
	background: -webkit-linear-gradient($t, $b);
	background: -moz-linear-gradient($t, $b);
	background: -ms-linear-gradient($t, $b);
	background: -o-linear-gradient($t, $b);
	background: linear-gradient($t, $b);
}
@mixin box-sizing($s : border-box){
	-webkit-box-sizing: $s;
	-moz-box-sizing: $s;
	-o-box-sizing: $s;
	box-sizing: $s;
}

/********** RESET **********/
html,body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	background: #fff;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: normal;
	line-height: 1.5;
	color: $color_black;
	@media (max-width: 1599px) { font-size: 18px; }
	@media (max-width: 1399px) { font-size: 16px; }
}
input, select, textarea {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: $color_black !important;
	outline: none !important;
}

p {margin: 0px 0px 1.5em 0px; padding: 0px;}

a, a:link, a:visited {
	color: $color_blue;
	text-decoration: underline;
}
a:hover {text-decoration: none;}
a:focus,a:active {outline: none;}
a img, :link img, :visited img {border: none;}

table {border-collapse: collapse; border-spacing: 0;}
table td {padding: 0px;}

address {font-style: normal;}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	margin: 0px 0px 0.5em 0px;
	padding: 0px;
	font-weight: bold;
	line-height: 1.3;
	color: $color_black;
}
h1, .h1 {font-size: 2em;}
h2, .h2 {font-size: 1.8;}
h3, .h3 {font-size: 1.6em;}
h4, .h4 {font-size: 1.4em;}
h5, .h5 {font-size: 1.2em;}
h6, .h6 {font-size: 1em;}

.ws-nw {white-space: nowrap !important;}
.text-underline {text-decoration: underline;}

/* --- links --- */
.overlink {
	background: url(../images/blank.gif) no-repeat 0 0;
	position: absolute; top: 0px; left: 0px; z-index: 55;
	display: block; width: 100%; height: 100%;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

/********** LAYOUT **********/
#wrap {
	background: #DDE6D8;
	width: 100%;
	min-width: 1200px;
	min-height: 100%;
	position: relative;
}

.wtv {
	padding: 50px;
	.wtv-head {
		margin-bottom: 30px;
		img { display: block; width: 40%; }
		.title {
			font-family: 'Rubik Mono One', sans-serif;
			font-size: 56px;
			line-height: 60px;
			color: #DDE6D8;
			letter-spacing: 1px;
			text-shadow: -1px -1px 1px #222, 1px 1px 1px #222, -1px 1px 1px #222, 1px -1px 1px #222;
			span { letter-spacing: 4px; }
		}
		.timer {
			float: right;
			font-family: 'Rubik Mono One', sans-serif;
			font-size: 56px;
			line-height: 60px;
			color: #9B9B9B;
			//letter-spacing: 1px;
		}
	}
	.wtv-body {
		.wtv-body__left {
			float: left;
			width: 45%;
			margin-bottom: 0px;
			font-size: 1.5em;
			line-height: 1.2em;
		}
		.wtv-body__right {
			float: right;
			width: 50%;
		}
	}
	.wtv-brand-list {
		margin: 0px 0px 20px 0px; padding: 0px; list-style: none;
		li {
			border-bottom: 2px solid $color_gray_20;
			padding: 10px 0px;
			font-size: 1.6em;
			line-height: normal;
			.badge {
				float: right;
			}
			.name {
				position: relative;
				overflow: hidden;
				display: block;
				//margin-right: 120px;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
	.wtv-person-list {
		margin: 0px 0px 20px 0px; padding: 0px; list-style: none;
		li {
			background: #e5ece1;
			& + li { margin-top: 15px; }
			.person {
				position: relative;
				overflow: hidden;
				zoom: 1;
				.img {
					float: left;
					img {
						display: block;
						height: 80px;
					}
				}
				.datatime {
					position: relative;
					float: right;
					padding: 0px 20px;
					line-height: 80px;
					white-space: nowrap;
					.time {
						display: inline-block;
						vertical-align: top;
						//min-width: 120px;
						min-width: 3.3em;
						font-size: 1.5em;
					}
					.counter {
						position: relative; top: -20px;
						display: inline-block;
						vertical-align: top;
						//min-width: 45px;
						min-width: 1.8em;
						opacity: 0.7;
						text-align: right;
					}
				}
				.name {
					position: relative;
					overflow: hidden;
					zoom: 1;
					padding: 0px 20px;
					font-size: 1.8em;
					line-height: 80px;
					.ellipsis {
						position: relative;
						overflow: hidden;
						display: block;
						margin-right: 60px;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.crown {
						position: absolute; top: 50%; right: 15px;
						display: block; width: 50px; height: 50px;
						margin-top: -25px;
						fill: #ffc10d;
						color: #ffc10d;
					}
				}
			}
			//&:first-child {}
			&.top {
				background: $color_white;
				.datatime {
					background: $color_green;
					.time {
						color: $color_white;
					}
					.counter {
						color: $color_white;
						opacity: 0.7;
					}
				}
			}
		}
	}
}

.footer-separate {
	height: 90px;
	clear: both;
}
#footer {
	position: absolute; bottom: 50px; left: 50px;
	.logo {
		display: block;
		width: 220px;
	}
}


.badge {
	display: inline-block;
	padding: 0px 12px;
	@include border-radius(10px);
	&.badge-default { background: #9B9B9B; color: $color_white; }
	&.badge-outline-default { border: 1px solid #9B9B9B; }
	&.badge-success { background: $color_green; color: $color_white; }
	&.badge-warning { background: $color_yellow; }
	&.badge-danger { background: $color_red; color: $color_white; }
}

//20.03.2018
.rowly {
	position: relative;
	margin-left: -8px;
	margin-right: -8px;
	&.rowly-flex {
		display: flex;
		.rowly-col-middle {
			align-self: center;
		}
	}
	.rowly-col {
		float: left;
		min-height: 1px;
		padding-left: 8px;
		padding-right: 8px;
		@include box-sizing();
		@for $i from 1 through 100 {
			&.w-#{$i} { width: 0% + $i; }
		}
		&.col-12 { width: 100%; float: none; }
		&.col-11 { width: 91.66666667%; }
		&.col-10 { width: 83.33333333%; }
		&.col-9 { width: 75%; }
		&.col-8 { width: 66.66666667%; }
		&.col-7 { width: 58.33333333%; }
		&.col-6 { width: 50%; }
		&.col-5 { width: 41.66666667%; }
		&.col-4 { width: 33.33333333%; }
		&.col-3 { width: 25%; }
		&.col-2 { width: 16.66666667%; }
		&.col-1 { width: 8.33333333%; }
		&.rowly-col-lbord {
			border-left: 1px solid #dde4ec;
		}
	}
	&.rowly-4 {
		margin-left: -4px;
		margin-right: -4px;
		.rowly-col {
			padding-left: 4px;
			padding-right: 4px;
		}
	}
	&.rowly-12 {
		margin-left: -12px;
		margin-right: -12px;
		.rowly-col {
			padding-left: 12px;
			padding-right: 12px;
		}
	}
}
.rowly:before, .rowly:after {content: " "; display: table;}
.rowly:after {clear: both;}

.mn-w-75 { display: inline-block; min-width: 75px; }

.text-right { text-align: right; }

.dash-list {
	margin: 0px 0px 20px 0px; padding: 0px; list-style: none;
	font-size: 56px;
	@media (max-width: 1599px) { font-size: 44px; }
	@media (max-width: 1399px) { font-size: 38px; }
	li {
		& + li { border-top: 2px solid $color_gray_20; }
		padding: 10px 0px;
		line-height: normal;
		.name {
			position: relative;
			overflow: hidden;
			display: block;
			//margin-right: 120px;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
	.float-right { padding-left: 20px; }
}

.float-left { float: left; }
.float-right { float: right; }


//tv-2
.section-header {
	padding: 12px;
	.float-left {
		float: left;
		.title {
			display: inline-block;
			font-size: 60px;
			font-weight: bold;
			line-height: normal;
			text-transform: uppercase;
		}
		.count {
			position: relative;
			display: inline-block;
			margin-left: 24px;
			font-size: 32px;
			span {
				font-size: 42px;
			}
		}
	}
	.float-right {
		float: right;
		.logo {
			float: right;
			svg { display: block; }
		}
		.timer {
			position: relative;
			clear: both;
			font-size: 50px;
			font-weight: bold;
			line-height: normal;
		}
	}
}

.section-content {
	padding: 0px 12px;
}
	.section-transporter {
		float: left;
		width: 50%;
		.badge {
			font-size: 52px;
			padding: 0px .5em;
		}
		.section-transporter__head {
			margin-bottom: 12px;
			font-size: 28px;
			text-align: right;
			strong { font-size: 52px; }
		}
		.section-transporter__body {
			font-size: 52px;
			table {
				width: 100%;
				max-width: 100%;
				white-space: nowrap;
				td {
					border-bottom: 1px solid #9B9B9B;
					padding: 8px 0px;
				}
				.count {
					width: 10px;
					padding-left: 20px;
				}
				.ofl {
					.time {
						float: right;
						padding-left: 20px;
					}
					.name {
						position: relative;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}
		@media (max-width: 1599px){
			.badge { font-size: 42px; }
			.section-transporter__head {
				font-size: 24px;
				strong { font-size: 42px; }
			}
			.section-transporter__body { font-size: 42px; }
		}
		@media (max-width: 1399px){
			.badge { font-size: 36px; }
			.section-transporter__head {
				font-size: 20px;
				strong { font-size: 36px; }
			}
			.section-transporter__body { font-size: 36px; }
		}
	}
	.section-person {
		float: right;
		width: 45%;
		.section-person__list {
			margin: 0px; padding: 0px; list-style: none;
			li {
				background: #e5ece1;
				& + li { margin-top: 16px; }

				.section-person__item {
					position: relative;
					overflow: hidden;
					.img {
						float: left;
						width: 80px; height: 80px;
						img { display: block; width: 100%; }
					}
					.time {
						float: right;
						padding: 0px 8px 0px 16px;
						font-size: 40px;
						line-height: 80px;
						.count {
							display: inline-block;
							vertical-align: top;
							width: 32px;
							font-size: 20px;
							line-height: 1.5;
							text-align: right;
							opacity: 0.7;
						}
					}
					.name {
						position: relative;
						overflow: hidden;
						padding: 0px 16px;
						font-size: 40px;
						line-height: 80px;
						.text-nowrap {
							position: relative;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.crown {
							position: absolute; top: 50%; right: 12px;
							display: block;
							margin-top: -11px;
							color: #ffc20e;
						}
					}
				}

				&.active {
					background: #fff;
					.section-person__item {
						.img {}
						.time {
							background: #2DB92D;
							color: #fff;
						}
						.name {
							.text-nowrap {
								margin-right: 30px;
							}
						}
					}
				}
			}
		}
		@media (max-width: 1599px){
			.section-person__list {
				li {
					& + li { margin-top: 12px; }
					.section-person__item {
						.img { width: 68px; height: 68px; }
						.time {
							padding: 0px 8px 0px 16px;
							font-size: 36px;
							line-height: 68px;
							.count {
								width: 32px;
								font-size: 20px;
							}
						}
						.name {
							padding: 0px 16px;
							font-size: 36px;
							line-height: 68px;
						}
					}
				}
			}
		}
		@media (max-width: 1399px){
			.section-person__list {
				li {
					& + li { margin-top: 10px; }
					.section-person__item {
						.img { width: 60px; height: 60px; }
						.time {
							padding: 0px 8px 0px 16px;
							font-size: 32px;
							line-height: 60px;
							.count {
								width: 32px;
								font-size: 20px;
							}
						}
						.name {
							padding: 0px 16px;
							font-size: 32px;
							line-height: 60px;
						}
					}
				}
			}
		}
	}

.section-result {
	margin: 0px; padding: 0px; list-style: none;
	font-size: 60px;
	li {
		& + li { margin-top: 12px; }
	}
	@media (max-width: 1599px){
		font-size: 52px;
	}
	@media (max-width: 1399px){
		font-size: 48px;
	}
}

.section-leaders-separator {
	position: relative;
	clear: both;
	height: 250px;
	@media (max-width: 1399px){ height: 205px; }
}
.section-leaders {
	position: absolute; bottom: 0px; left: 0px; right: 0px;
	padding: 0px 12px 12px;
	font-size: 24px;
	text-align: center;
	.leader-list {
		display: inline-block;
		vertical-align: top;
		margin: 0px; padding: 0px; list-style: none;
		text-align: left;

		&.float-left {}
		&.float-right {}
		&.float-center { margin: 0 auto; }

		& + .leader-list { margin-left: 48px; }
		dt {
			margin: 0px 0px 4px 0px; padding: 0px;
			font-size: 36px;
		}
		dd {
			display: inline-block;
			vertical-align: top;
			margin: 0px; padding: 0px;
			& + dd { margin-left: 20px; }
			&.active {
				position: relative;
				&:before {
					content: '';
					background: #2DB92D;
					position: absolute; top: -4px; bottom: -4px; left: -8px; right: -8px;
					display: block;
				}
				.leader-list__item { background: #fff; }
			}
		}

		.leader-list__item {
			position: relative;
			z-index: 2;
			width: 120px;
			margin: 0px -4px;
			padding: 4px;
			.img {
				margin-bottom: 4px;
				img { display: block; width: 100%; }
			}
			.count {
				.q {
					font-size: 24px;
					font-weight: bold;
					line-height: normal;
				}
				.t {
					font-size: 14px;
					line-height: normal;
				}
			}
		}
		@media (max-width: 1399px){
			dt {
				font-size: 32px;
			}
			.leader-list__item {
				width: 90px;
				.count {
					.q { font-size: 18px; }
					.t { font-size: 12px; }
				}
			}
		}
	}
}



.material-icons {
	position: relative;
	top: -0.1em;
	vertical-align: middle;
	font-size: inherit;
}

.inline-svg {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	//width: .75em; height: .75em;
	//margin-top: -0.15em;
	color: inherit;
}