@import (reference) '~app/web/resources/styles/main.less';

@media (max-width: 1029px) {
	#ec_guide, .guide-tab-link {
		display: none !important;
	}
}

.guide-uefacl {
	color: #333;
	.square-font();
	font-size: 16px;
	border-bottom: 1px solid #EEF7EC;
}

.guide-body {
	background-image: url(/pics/field-bg-long.jpg?1);
	background-color: #EEF7EC;
	display: table;
}

.guide-header {
	border-top: 1px solid #EEF7EC;
	line-height: 40px;
}

.guide-header-col {
	border-right: 1px solid #EEF7EC;
	float: left;
	text-align: center;
}

.guide-col {
	text-align: center;
	display: table-cell;
	vertical-align: top;
}

.guide-body-row {
	display: table-row;

	&.guide-leg-row .guide-col-leg {
		background: rgba(100,100,100,0.1);
	}
	
	@media @sm-down {
	    display: block; 
	}
}

.guide-col-draw {
	background: #fff;
	border-right: 1px solid #EEF7EC;
	width: 53px;
	
	@media @sm-down {
	    display: block;
	}
}

.guide-r16-draw {
	padding-top: 35px;
}

.guide-qf-draw {
	padding-top: 35px;
}

.guide-sf-draw {
	padding-top: 183px;
}

.guide-r16-matches {
	padding-top: 35px;
}

.guide-qf-matches {
	padding-top: 35px;
}

.guide-sf-matches {
	padding-top: 183px;
}

.guide-f-matches {
	padding-top: 255px;
}

.guide-col-round {
	border-right: 1px solid #EEF7EC;
	width: 240px;
}

.guide-col-leg {
	width: 120px;
	max-width: 120px;

	&.guide-leg-1 {
		border-right: 1px dashed #fff;
	}
}

.guide-col-final {
	border-right: none;
	width: 121px;

	.guide-body & {
		background: rgba(255, 255, 255, 0.5);
	}
}

.guide-team-spot {
	border-radius: 40px;
	border: 2px solid #333;
	box-shadow: 0 0 22px 1px #ddd inset;
	display: block;
	height: 42px;
	margin: 0 auto;
	width: 42px;

	&:nth-child(odd) {
		margin-top: 6px;
		margin-bottom: 27px;
	}

	&:nth-child(even) {
		margin-bottom: 33px;
	}
}

.guide-badge {
	height: auto;
	position: relative;
	top: 4px;
	width: 30px;
}

.guide-badge-name {
	font-size: 10px;
	line-height: 12px;
	padding: 6px 0;
}

.guide-leg-header {
	padding: 10px 0;
}

.guide-match-box {
	border-radius: 8px;
	border: 2px solid #333;
	font-size: 14px;
	margin: 0 10px 20px;
	position: relative;
	text-align: center;

	a {
		color: inherit;
		display: block;
		position: relative;
		z-index: 2;
	}
}

.guide-match-holder {
	font-size: 14px;
	margin: 0 0 40px;
	position: relative;
	position: relative;
	top: -15px;
}

.guide-match-team {
	display: table;
	height: 40px;
	padding: 0 5px;
	width: 100%;

	span {
		display: table-cell;
		line-height: 16px;
		text-align: center;
		vertical-align: middle;
		font-size: 12px;
		word-break: break-word;
	}
}

.guide-match-info {
	background: #333;
	color: #fff;
	display: table;
	font-size: 12px;
	height: 40px;
	width: 100%;
	line-height: 17px;
}

.guide-match-info-cell {
	display: table-cell;
	vertical-align: middle;
}

.guide-score {
	font-size: 16px;
}

.guide-small-score {
	font-size: 12px;
}

.guide-video-icon, .guide-preview-icon  {
	font-size: 14px;
	position: absolute;
	color: #0c9;
}

.guide-video-icon {
	right: 5px;
	top: 52px;
}

.guide-preview-icon {
	right: 0px;
	top: 52px;
}

.guide-match-hover {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	z-index: 1;
	text-align: center;
	padding: 35px 0;
	font-size: 18px;
	color: #fff;

	.guide-match-link:hover & {
		display: block;
	}
}

.guide-match-ball {
	height: auto;
	margin-top: 15px;
	width: 45px;
}

.guide-connecting-lines {
	display: none;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;

	.guide-leg-1 & {
		display: block;
		left: -20px;
		width: 200px;
	}

	.guide-f-matches & {
		display: block;
		left: -50px;
		width: 100px;
	}
}

.guide-final-home-badge, .guide-final-away-badge {
	width: 40px;
	height: 40px;
	position: absolute;
	top: -55px;
	left: 27px;
}

.guide-final-away-badge {
	top: auto;
	bottom: -55px;
}