// Single broadcast
.vp_broadcast_meta {
	padding: 15px 0;
	> div {
		padding: 5px 0;
		&:before {
			display: inline-block;
			-webkit-font-smoothing: antialiased;
			font: normal 20px/1 'dashicons';
			vertical-align: top;
			margin: 0 6px 0 0;
		}
		&.vp_meta_date {
			&:before {
				content: "\f145";
			}
		}
		&.vp_meta_time {
			&:before {
				content: "\f469";
			}
		}
		&.vp_meta_place {
			&:before {
				content: "\f230";
			}
		}
	}
}

.vp_broadcast_descr {
	padding: 0 0 15px 0;
}

.vp_broadcast_data {
	// Standart styles
	.vp_broadcast_item {
		font-size: inherit;
		background: #fff;
		&:after {
			content: "";
			width: 100%;
			display: block;
			clear: both;
		}
		border: 1px solid #999;
		margin: 0 0 10px 0;
		&.section {
			padding: 15px;
		}
		&.timestamp {
			.timestamp_time {
				.box-sizing(border-box);
				padding: 10px;
				width: 20%;
				border-right: 1px solid #999;
				margin-right: -1px;
				float: left;
			}
			.timestamp_event {
				.box-sizing(border-box);
				padding: 10px;
				width: 80%;
				border-left: 1px solid #999;
				float: left;
			}
		}
		&.important {
			background: #eee;
			.timestamp_time {
				font-weight: bold;
			}
		}
	}
	.section_title {
		margin: 0 0 5px 0;
		padding: 0;
		text-align: center;
	}
	.section_desc {
		text-align: center;
		font-size: 80%;
	}
	//timeline
	&.timeline {
		position: relative;
		&:before {
			position: absolute;
			z-index: 1;
			top: 0;
			bottom: 0;
			left: 50%;
			width: 4px;
			margin: 0 0 0 -2px;
			content: "";
			background: #999;
			opacity: .5;
		}
		.vp_broadcast_item {
			margin: 0 0 30px 0;
			position: relative;
			z-index: 2;
			&.vp_fullwidth {
				clear: both;
				.vp_marker {
					position: absolute;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 10px 10px 0 10px;
					border-color: #999 transparent transparent transparent;
					bottom: -10px;
					left: 50%;
					margin: 0 0 0 -10px;
					&:after {
						position: absolute;
						width: 0;
						height: 0;
						border-style: solid;
						border-width: 8px 8px 0 8px;
						border-color: #fff transparent transparent transparent;
						left: -8px;
						top: -10px;
						content: "";
					}
				}
			}
			&.vp_left {
				float: left;
				width: 45%;
				clear: left;
				.vp_marker {
					position: absolute;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 10px 0 10px 10px;
					border-color: transparent transparent transparent #999;
					right: -10px;
					top: 50%;
					margin: -10px 0 0 0;
					&:after {
						position: absolute;
						width: 0;
						height: 0;
						border-style: solid;
						border-width: 8px 0 8px 8px;
						border-color: transparent transparent transparent #fff;
						left: -10px;
						top: -8px;
						content: "";
					}
				}
			}

			&.vp_right {
				float: right;
				width: 45%;
				clear: right;
				.vp_marker {
					position: absolute;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 10px 10px 10px 0;
					border-color: transparent #999 transparent transparent;
					left: -10px;
					top: 50%;
					margin: -10px 0 0 0;
					&:after {
						position: absolute;
						width: 0;
						height: 0;
						border-style: solid;
						border-width: 8px 8px 8px 0;
						border-color: transparent #fff transparent transparent;
						left: 2px;
						top: -8px;
						content: "";
					}
				}
			}
			&.vp_fullwidth.important {
				.vp_marker {
					&:after {
						border-color: #eee transparent transparent transparent;
					}
				}
			}
			&.timestamp {
				.timestamp_time {
					width: 100%;
					border:none !important;
					margin: 0;
					float: none;
				}
				.timestamp_event {
					float: none;
					border: none !important;
					width: 100%;
					margin: 0;
					padding-top: 0;
				}
			}
		}
		&:after {
			clear: both;
			content: "";
			width: 100%;
			display: block;
		}
	}
}

.vp_broadcast_scoreboard {
	padding: 20px;
	text-align: center;
	.teams {
		padding: 0 0 20px 0;
		>span {
			font-size: 110%;
			.box-sizing(border-box);
			float: left;
			width: 40%;
			padding: 0;
			text-align: right;
			&.team-2 {
				text-align: left;
			}
		}
		&:after {
			clear: both;
			content: "";
			width: 100%;
			display: block;
		}
		.score {
			position: relative;
			float: left;
			width: 20%;
			font-weight: bold;
			span {
				font-size: 110%;
				.box-sizing(border-box);
				float: left;
				width: 50%;
				padding: 0 10px;
				text-align: center;
			}
			&:after {
				clear: both;
				content: "";
				width: 100%;
				display: block;
			}
			&:before {
				content: ":";
				position: absolute;
				left: 50%;
				width: 20px;
				text-align: center;
				margin: 0 0 0 -10px;
			}
		}
	}
}

.countdown-wrap {
	border: 1px solid #999;
	width: 60px;
	height: 60px;
	.box-sizing(border-box);
	border-radius: 30px;
	line-height: 60px;
	text-align: center;
	margin: 4px auto;
}

.vp_label {
	display: inline-block;
	padding: 5px 10px;
	font-size: 80%;
	line-height: 1em;
	vertical-align: top;
	text-transform: lowercase;
	&.coming_soon {
		background: #21A300;
		color: #fff;
	}
	&.live {
		background: #D9041A;
		color: #fff;
	}
	&.ended {
		background: #333;
		color: #fff;
	}
}

// Shortcode broadcast_list
.vp_broadcast_list {
	padding: 10px 0;
	margin: 0 !important;
	li {
		list-style: none !important;
		a {
			color: inherit;
			text-decoration: none;
		}
	}
	&.row {
		margin: 0 -5px;
		.vp_broadcast_list_item {
			display: inline-block;
			.box-sizing(border-box);
			width: 25%;
			padding: 0 5px;
			margin: 0 0 10px 0;
			.vp_label {
				display: block;
				width: 100%;
				.box-sizing(border-box);
				text-align: center;
			}
			.vp_broadcast_list_item_content {
				padding: 10px;
				background-color: #eee;
				&:after {
					clear: both;
					content: "";
					width: 100%;
					display: block;
				}
				.vp_bl_team_1,
				.vp_bl_team_2 {
					float: left;
					clear: left;
					width: 80%;
					text-align: left;
				}
				.vp_bl_scorebox {
					float: right;
					width: 20%;
					b {
						display: block;
						text-align: right;
					}
				}
			}
		}
	}
	&.col {
		.vp_broadcast_list_item {
			padding: 0 0 20px 0;
			text-align: center;
			.vp_broadcast_list_item_content {
				padding: 15px 0 20px;
			}
			.vp_bl_team_1 {
				display: inline-block;
				width: 40%;
				text-align: right;
				padding: 0 10px 0 0;
				.box-sizing(border-box);
				vertical-align: middle;
				font-size: 110%;
			}
			.vp_bl_team_2 {
				display: inline-block;
				width: 40%;
				text-align: left;
				padding: 0 0 0 10px;
				.box-sizing(border-box);
				vertical-align: middle;
				font-size: 110%;
			}
			.vp_bl_scorebox {
				display: inline-block;
				width: 20%;
				position: relative;
				&:after {
					position: absolute;
					content: ':';
					font-size: 120%;
					left: 50%;
					top: 0;
					padding: 5px 0;
					width: 10px;
					margin: 0 0 0 -5px;
				}
				b {
					padding: 5px 10px;
					font-size: 110%;
					background: #eee;
					display: inline-block;
					margin: 0 10px;
				}
			}
		}
	}
}

// mixins

// Box sizing
.box-sizing(@boxmodel) {
  -webkit-box-sizing: @boxmodel;
     -moz-box-sizing: @boxmodel;
          box-sizing: @boxmodel;
}