/**=====================
    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;
	}
}

.activity {
	.media {
		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: #e9e9e9;
					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;
				}
			}
		}

		.media-body {
			h6 {
				font-weight: 600;
				margin-bottom: 30px;

				span {
					font-weight: normal;
					color: $light-text;
				}
			}

			p {
				width: 80%;
			}
		}
	}
}

.timeline-small {
	.media {
		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;
				}
			}
		}

		.media-body {
			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;
			}
		}
	}

	.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 $gray-60;
		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;
				background-color: $light-primary;
				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
==========================**/