/*====Data Info====*/
.data-info {
	.data-info-list {
		padding: 2rem 0;
		border-right: 1px solid #eee;
	}
	.arrow-box i {
		font-size: 5rem;
	}
}

@media only screen and (max-width:767px) {
	.data-info{
		>.col:last-child .data-info-list{
			border-bottom: 0;
		} 
		.data-info-list {
			border-right: 0;
			border-bottom: 1px solid #eee;		
		}
	}
}

/*====To DO List====*/
.todo-list-section {
	.to-do-list {
		position: relative;
		.remove-btn {
			position: absolute;
			right: 10px;
			top: 18px;
			opacity: 0; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
			transition: all 0.3s ease-in;
		}
		.to-do-check {
			position: absolute;
			left: 10px;
		}
		.to-do-content {
			margin-left: 50px;
		}
		.complete {
			text-decoration: line-through;
		}
		&:hover .remove-btn {
			opacity: 1;
		}
	}
	.modal .modal-overlay {
		opacity: 0 !important;
	}
}

/*====Review Slider====*/
.review-slider {
	.slick-arrow {
		position: absolute;
		top: -30px;
		cursor: pointer;
	}
	.slick-prev {
		right: 35px;
	}
	.slick-next {
		right: 0;
	}
}
.review-widget-wrapper{
	.zmdi-star{
		color:$e-shop-rating;
	}
}

/*====Progress Bar====*/
.prograss-bar {
	position: relative;
	margin: 36px 0;
	.progress {
		margin: 0; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
		border-radius: 0 10px 10px 0;
	}
	.progress-counter {
		position: absolute;
		top: -20px;
		right: -10px;
	}
	.label-header {
		width: 5.125rem;
	}
}

/*====Support Mail====*/
.support-widget-wrap ul li {
	padding: 0.5rem;
	&:not(:nth-child(2)) {
		background-color: $main-container-bg !important;
	}
}

.new-mail li {
	position: relative;
	padding: 0.8rem 1rem;
	.mail-action {
		opacity: 0; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
		transition: all 0.3s ease-in-out;
		position: absolute;
		right: 10px;
		bottom: 20px;
		.btn-icon {
			height: 30px !important;
			width: 30px !important;
			display: inline-block;
			vertical-align: middle;
			line-height: 30px;
			text-align: center; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
			border-radius: 50%;
			font-size: 18px;
		}
	}
	> div {
		border-bottom: 1px solid $color_gallery_approx;
	}
	&:hover .mail-action {
		opacity: 1;
	}
}

.bar.badge {
	float: none;
	width: 13px;
	height: 7px; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 10px;
	text-align: left;
	display: block;
	margin: 0;
	margin-bottom: 0.5rem;
	min-width: 13px;
}

.progress .determinate {
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 0 10px 10px 0;
}

.eq-33 > * {
	width: 33%;
}


/*====Widget Title====*/
.widget .widget-title {
	margin-bottom: 1.8rem;
}

/*====Categories====*/
.cat-list li {
	display: block;
	margin-bottom: 0.7rem;
	border-bottom: 1px solid $color_gallery_approx;
	padding-bottom: 0.7rem;
	padding-left: 1rem;
	a {
		color: #444;
	}
}

/*====Widget Tags====*/
.tags-widget ul li {
	display: inline-block;
	a {
		background: $primary-color;
		color: #fff;
		padding: 0.5rem;
		display: block; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
		border-radius: 5px;
		margin: 0.2rem;
	}
}
