//	=================
//    	Imports
//	=================

@import '../../base/color_variables';   	// Color Variables
@import '../../base/fonticons';   			// Fonticons Variables
@import '../../base/urls';   				// URLS Variables
@import '../../base/utilities_variables';  // Utilities Variables

.timeline {
	list-style: none;
	padding: $p-20 $p-0 $p-20;
	position: $pos-rel;
	&:before {
		top: 0;
		bottom: 0;
		position: $pos-abs;
		content: " ";
		width: 3px;
		background-color: $color_409;
		left: 50%;
		margin-left: -1.5px;
	}
	>li {
		margin-bottom: $m-20;
		position: $pos-rel;
		&:before {
			content: " ";
			display: table;
			content: " ";
			display: table;
		}
		&:after {
			content: " ";
			display: table;
			clear: both;
			content: " ";
			display: table;
			clear: both;
		}
		>.timeline-panel {
			width: 46%;
			float: left;
			border: $b-width-1 $solid $color_50;
			border-radius: 2px;
			padding: $p-20;
			position: $pos-rel;
			&:before {
				position: $pos-abs;
				top: 26px;
				right: -15px;
				display: inline-block;
				border-top: 15px $solid transparent;
				border-left: 15px $solid transparent;
				border-right: 0 $solid transparent;
				border-bottom: 15px $solid transparent;
				content: " ";
			}
			&:after {
				position: $pos-abs;
				top: 27px;
				right: -14px;
				display: inline-block;
				border-top: 14px $solid transparent;
				border-left: 14px $solid transparent;
				border-right: 0 $solid transparent;
				border-bottom: 14px $solid transparent;
				content: " ";
			}
		}
		>.timeline-badge {
			color: $white;
			width: 50px;
			height: 50px;
			line-height: 50px;
			font-size: 1.4em;
			text-align: $align-center;
			position: $pos-abs;
			top: 16px;
			left: 50%;
			margin-left: -25px;
			z-index: 100;
			border-top-right-radius: 50%;
			border-top-left-radius: 50%;
			border-bottom-right-radius: 50%;
			border-bottom-left-radius: 50%;
		}
	}
	>li.timeline-inverted {
		>.timeline-panel {
			float: $align-right;
			&:before {
				border-left-width: 0;
				border-right-width: 15px;
				left: -15px;
				right: auto;
			}
			&:after {
				border-left-width: 0;
				border-right-width: 14px;
				left: -14px;
				right: auto;
			}
		}
	}
}
hr {
	border-top: $b-width-1 $solid $light-gray;
}
.timeline1 {
	&:before {
		width: 0px;
	}
}
.timeline-badge.primary {
	background-color: $color_410 !important;
}
.timeline-badge.success {
	background-color: $color_411 !important;
}
.timeline-badge.warning {
	background-color: $color_412 !important;
}
.timeline-badge.danger {
	background-color: $color_413 !important;
}
.timeline-badge.info {
	background-color: $color_414 !important;
}
.timeline-title {
	margin-top: $m-0;
	color: $additional-color-11;
	font-size: 1.5rem;
}
.timeline-body {
	.btn-group {
		button {
			i {
				vertical-align: $v-align-sub;
				font-size: 15px;
			}
		}
		div.dropdown-menu {
			padding-left: 7px;
			padding-right: 7px;
			a.dropdown-item {
				&:focus {
					color: $color_408;
					text-decoration: none;
					background-color: $light-gray;
				}
				&:hover {
					color: $color_408;
					text-decoration: none;
					background-color: $light-gray;
				}
				&:active {
					color: $color_408;
					text-decoration: none;
					background-color: $light-gray;
				}
			}
			a.dropdown-item.active {
				color: $color_408;
				text-decoration: none;
				background-color: $light-gray;
			}
		}
		button.dropdown-toggle {
			&:after {
				color: $white;
			}
		}
	}
	>p {
		margin-bottom: $m-0;
		&+p {
			margin-top: $m-5;
		}
	}
	>ul {
		margin-bottom: $m-0;
	}
}
.dropdown-menu.show {
	border-color: $light-gray;
	box-shadow: $shadow-3;
}
.dropdown-item.active {
	color: $color_408;
	text-decoration: none;
	background-color: $light-gray;
}
@media (max-width: 767px) {
	ul.timeline {
		&:before {
			left: 40px;
		}
		>li {
			>.timeline-panel {
				width: calc(100% - 90px);
				width: -moz-calc(100% - 90px);
				width: -webkit-calc(100% - 90px);
				float: $align-right;
				&:before {
					border-left-width: 0;
					border-right-width: 15px;
					left: -15px;
					right: auto;
				}
				&:after {
					border-left-width: 0;
					border-right-width: 14px;
					left: -14px;
					right: auto;
				}
			}
			>.timeline-badge {
				left: 15px;
				margin-left: $m-0;
				top: 16px;
			}
		}
	}
}