/**=====================
    3.40 Timeline-v CSS Start
==========================**/
.timeline-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 12px;
}
.time-content {
	display: flex;
	align-items: center;
	gap: 4px;
	i {
		font-size: 18px;
	}
}
.dark-timeline {
	ul {
		li {
			&.d-flex {
				margin-top: 17px;
			}
		}
	}
}
.activity {
	.d-flex {
		margin-bottom: 30px;
		&:last-child {
			margin-bottom: 0;
		}
		.gradient-round {
			position: relative;
			width: 53px;
			height: 53px;
			background-image: $gradient-primary;
			border-radius: 100%;
			top: -18px;
			svg {
				position: absolute;
				width: 18px;
				height: 18px;
				display: flex;
				align-items: center;
				justify-content: center;
				left: 0;
				top: 18px;
				right: 0;
				margin: 0 auto;
				path,
				line,
				circle {
					color: $white;
				}
			}
			&.gradient-line-1 {
				&:after {
					position: absolute;
					content: '';
					background-color: $theme-body-sub-title-color;
					width: 2px;
					height: 62px;
					bottom: -77px;
					left: 0;
					right: 0;
					margin: 0 auto;
				}
			}
			&.small-line {
				&:after {
					position: absolute;
					content: '';
					background-color: #e9e9e9;
					width: 2px;
					height: 19px;
					bottom: -34px;
					left: 0;
					right: 0;
					margin: 0 auto;
				}
			}
			&.medium-line {
				&:after {
					position: absolute;
					content: '';
					background-color: #e9e9e9;
					width: 2px;
					height: 53px;
					bottom: -68px;
					left: 0;
					right: 0;
					margin: 0 auto;
				}
			}
		}
		.flex-grow-1 {
			h6 {
				font-weight: 600;
				margin-bottom: 30px;
				span {
					font-weight: normal;
					color: $light-text;
				}
			}
			p {
				width: 80%;
			}
		}
	}
}
.timeline-small {
	.d-flex {
		margin-bottom: 30px;
		&:last-child {
			margin-bottom: 0;
		}
		.timeline-round {
			position: relative;
			width: 53px;
			height: 53px;
			border-radius: 100%;
			border-radius: 15px;
			top: -18px;
			svg {
				position: absolute;
				width: 18px;
				height: 18px;
				display: flex;
				align-items: center;
				justify-content: center;
				left: 0;
				top: 18px;
				right: 0;
				margin: 0 auto;
				path,
				line,
				circle {
					color: $white;
				}
			}
			&.timeline-line-1 {
				&:after {
					position: absolute;
					content: '';
					background-color: #e9e9e9;
					width: 2px;
					height: 62px;
					bottom: -88px;
					left: 0;
					right: 0;
					margin: 0 auto;
				}
			}
			&.small-line {
				&:after {
					position: absolute;
					content: '';
					background-color: #e9e9e9;
					width: 2px;
					height: 19px;
					bottom: -34px;
					left: 0;
					right: 0;
					margin: 0 auto;
				}
			}
			&.medium-line {
				&:after {
					position: absolute;
					content: '';
					background-color: #e9e9e9;
					width: 2px;
					height: 53px;
					bottom: -68px;
					left: 0;
					right: 0;
					margin: 0 auto;
				}
			}
		}
		.flex-grow-1 {
			h6 {
				margin-bottom: 30px;
				span {
					font-weight: normal;
					color: $light-text;
				}
			}
			p {
				width: 80%;
			}
		}
	}
}
.cd-container {
	width: 90%;
	max-width: 1170px;
	margin: 0 auto;
}
.cd-container::after {
	content: '';
	display: table;
	clear: both;
}
@media only screen and (min-width: 1170px) {
	#cd-timeline::before {
		left: 50% !important;
		margin-left: -2px;
	}
	.cd-timeline-block {
		margin: 4em 0;
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
		&:nth-child(even) {
			.cd-timeline-content {
				float: right;
				.cd-date {
					left: auto;
					right: 122%;
					text-align: right;
				}
			}
			.cd-timeline-content::before {
				top: 24px;
				left: auto;
				right: 100%;
				border-color: transparent;
				border-right-color: $light-color;
			}
		}
	}
	.cd-timeline-img {
		width: 60px;
		height: 60px;
		left: 50%;
		margin-left: -30px;
		>i {
			font-size: 18px;
			top: 50%;
			left: 50%;
			padding: 3px;
		}
	}
	.cssanimations {
		.cd-timeline-img {
			&.is-hidden {
				visibility: hidden;
			}
			&.bounce-in {
				visibility: visible;
				animation: cd-bounce-1 0.6s;
			}
		}
		.cd-timeline-content {
			&.is-hidden {
				visibility: hidden;
			}
			&.bounce-in {
				visibility: visible;
				animation: cd-bounce-2 0.6s;
			}
		}
		.cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
			animation: cd-bounce-2-inverse 0.6s;
		}
	}
	.cd-timeline-content {
		margin-left: 0;
		padding: 1.6em;
		width: 45%;
		.cd-date {
			position: absolute;
			width: 100%;
			left: 122%;
			top: 6px;
			font-size: 16px;
		}
	}
	.cd-timeline-content::before {
		top: 24px;
		left: 100%;
		border-color: transparent;
		border-left-color: $white;
	}
}
#cd-timeline {
	position: relative;
	padding: 2em 0;
}
#cd-timeline::before {
	content: '';
	position: absolute;
	top: 0;
	font-size: 1.5rem;
	height: 100%;
	width: 2px;
	background: $light-color;
	left: -15px;
}
.cd-timeline-block {
	position: relative;
	margin: 30px 0;
	&:after {
		content: "";
		display: table;
		clear: both;
	}
	&:first-child {
		margin-top: 0;
	}
	&:last-child {
		margin-bottom: 0;
	}
}
.cd-timeline-img {
	width: 40px;
	height: 40px;
	left: 51%;
	margin-left: -30px;
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	position: absolute;
	top: 0;
	border-radius: 50px;
	i {
		display: block;
		position: relative;
		left: 45%;
		top: 44%;
		margin-left: -12px;
		margin-top: -12px;
		font-size: 20px;
		color: $white;
	}
}
@-webkit-keyframes cd-bounce-1 {
	0% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
}
@-moz-keyframes cd-bounce-1 {
	0% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
}
@keyframes cd-bounce-1 {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}
	60% {
		opacity: 1;
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}
.cd-timeline-content {
	position: relative;
	background: $light-color;
	border-radius: 4px;
	padding: 30px;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.08);
	p {
		padding-top: 9px;
	}
	h4 {
		margin-bottom: 0;
	}
	&:after {
		content: "";
		display: table;
		clear: both;
	}
	audio {
		width: 100%;
	}
	.cd-date {
		font-size: 13px;
		display: inline-block;
		float: left;
		padding: .8em 0 0;
		opacity: .7;
	}
}
.cd-timeline-content::before {
	content: '';
	position: absolute;
	top: 28px;
	right: 100%;
	height: 0;
	width: 0;
	border: 15px solid transparent;
	border-left: 15px solid $light-color;
	[dir="rtl"] & {
		border-right: 15px solid $light-color;
		border-left: unset;
	}
	@media (max-width:1169px) {
		display: none;
	}
}
@media only screen and (min-width: 768px) {
	.cd-timeline-content {
		.cd-date {
			font-size: 14px;
			padding-bottom: 0;
		}
	}
}
@-webkit-keyframes cd-bounce-2 {
	0% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
}
@-moz-keyframes cd-bounce-2 {
	0% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
	100% {}
}
@keyframes cd-bounce-2 {
	0% {
		opacity: 0;
		transform: translateX(-100px);
	}
	60% {
		opacity: 1;
		transform: translateX(20px);
	}
	100% {
		transform: translateX(0);
	}
}
@-webkit-keyframes cd-bounce-2-inverse {
	0% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
}
@-moz-keyframes cd-bounce-2-inverse {
	0% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
	100% {}
}
@keyframes cd-bounce-2-inverse {
	0% {
		opacity: 0;
		transform: translateX(100px);
	}
	60% {
		opacity: 1;
		transform: translateX(-20px);
	}
	100% {
		transform: translateX(0);
	}
}
@media only screen and (max-width: 1169px) {
	.cd-timeline-block {
		.cd-timeline-img {
			left: -2px;
			height: 30px;
			width: 30px;
			margin-left: -30px;
			top: 14px;
			z-index: 7;
			>i {
				font-size: 15px;
				top: 16px;
				left: 17px;
				padding: 3px;
				[dir="rtl"] & {
					left: unset;
					right: 4px;
					margin-right: unset;
				  }
			}
		}
	}
	.landing-main {
		#cd-timeline::before {
			left: -39px;
		}
		.cd-timeline-block {
			.cd-timeline-img {
				left: -34px;
				height: 50px;
				width: 50px;
				top: 1px;
				z-index: 8;
				>i {
					font-size: 23px;
					top: 21px;
					left: 7px;
					padding: 3px;
				}
			}
		}
	}
}
@media only screen and (max-width: 576px) {
	.cd-timeline-content {
		padding: 15px;
		h4 {
			font-size: 18px;
		}
	}
}
.main-timeline {
	ul {
		&::before {
			left: 5px;
			[dir="rtl"] & {
				right: 5px;
				left: unset;
			}
		}
	}
}
.square-timeline {
	position: relative;
	&::before {
		border: 1px dashed $theme-body-sub-title-color;
		content: '';
		margin-left: 0px;
		position: absolute;
		top: 0;
		left: 18px;
		width: 1px;
		height: 100%;
		[dir="rtl"] & {
			margin-left: unset;
			margin-right: 0;
			left: unset;
			right: 18px;
		}
	}
	.timeline-event {
		position: relative;
		&:hover {
			.timeline-event-icon { 
				transform: rotate(-105deg);
				background-color: $badge-light-color;
			}
			.timeline-event-wrapper {
				.timeline-thumbnail {
					box-shadow: inset 40em 0 0 0 $light-warning;
				}
			}
		}
		.timeline-event-wrapper {
			padding: 0 0 0 14px;
			position: relative;
			top: -7px;
			left: 38px;
			width: 95%;
			[dir="rtl"] & {
				left: unset;
				right: 38px;
				padding: 0 14px 0 0;
			}
			@media (max-width: 1200px) {
				width: calc(84% + (95 - 84) * ((100vw - 320px) / (1200 - 320)));
			}
			.designer-details {
				padding-top: 20px;
			}
			.timeline-thumbnail {
				transition: box-shadow 0.5s ease-in 0.1s;
				color: $dark-color !important;
				background-color: $theme-medium-color;
				box-shadow: inset 0 0 0 0em $light-info;
				display: inline-block;
				margin-bottom: 12px;
				padding: 2px 25px;
			}
			.list-group-item-action {
				&:hover,
				&:active,
				&:focus {
					background-color: unset;
				}
			}
			>div {
				display: inline-block;
				width: 100%;
			}
		}
		.timeline-event-icon {
			transition: 0.2s ease-in;
			transform: rotate(45deg);
			background-color: $primary-color;
			outline: 6px solid $light-primary;
			display: block;
			margin: 0px;
			position: absolute;
			top: 0;
			left: 14px;
			width: 10px;
			height: 10px;
			[dir="rtl"] & {
				right: 14px;
				left: unset;
			}
		}
	}
}
// Horizontal timeline
.list-inline {
	display: flex;
	justify-content: center;
	&.events {
		.event-list {
			display: block;
			position: relative;
			text-align: center;
			padding-top: 70px;
			margin-right: 0;
			p {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.event-date {
				position: absolute;
				top: 38px;
				left: 0;
				right: 0;
				width: 75px;
				margin: 0 auto;
				border-radius: 4px;
				padding: 2px 4px;
				p {
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					display: -webkit-box;
					overflow: hidden;
					line-height: 1.5;
					margin-top: 7px;
				}
			}
		}
	}
}
.timeline-list {
	&.timeline-border {
		border-bottom: 1px solid $gray-60;
	}
	&.list-inline {
		padding-bottom: 0;
		&.events {
			.event-list {
				padding-top: 35px;
				&::before {
					content: '';
					height: 0;
					border-right: unset;
				}
				.event-date {
					top: 2px;
					p {
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						display: -webkit-box;
						overflow: hidden;
						line-height: 1.5;
						margin-top: 7px;
					}
				}
				.read-more-btn {
					position: relative;
					margin-bottom: 3px;
				}
			}
		}
		.vertical-line {
			height: 45px;
			width: 1px;
			margin: 0 auto;
			position: relative;
			border: 1px dashed $primary-color;
		}
	}
}
.list-group {
	&.main-lists-content {
		padding-top: 20px;
	}
	.list-group-item {
		.timeline-icon {
			@media (max-width:1218px) {
				display: none;
			}
		}
	}
}
.horizontal-timeline {
	@media (max-width: 1400px) {
		display: none;
	}
}
/**=====================
    3.40 Timeline-v CSS Ends
==========================**/