.list-circle,
.list-angle-double,
.list-square,
.list-square-check,
.list-check-circle,
.list-check-circle-small,
.list-check,
.list-plus-circle,
.list-arrow-left-circle,
.list-arrow-right-circle,
.list-check-try{
	li{
		position: relative;
		padding: 5px 5px 5px 30px;
		font-family: var(--font-family-base);
		font-size: 16px;
		
		@include respond('tab-land'){
			font-size: 15px;
		}
		&:before{
			position: absolute;
			#{$dz-pos-left}: 0;
			top: 8px;
			font-family: "Font Awesome 5 Free";
			font-weight: 900;
		}
	}
	&.primary{
		li{
			&:before{
				color: var(--bs-primary);
			}
		}
	}
	&.white{
		li{
			&:before{
				color: #fff;
			}
		}
	}
	&.gray{
		li{
			&:before{
				color: #cbcbcb;
			}
		}
	}
	&.light-green{
		li{
			&:before{
				background-color: #36DBC7;
				color: var(--bs-secondary);
			}
		}
	}
}
ul{
	&.list-circle{
		li{
			padding: 5px 5px 5px 22px;
			&:before{
				content: "\f111";
				font-size: 6px;
				top: 15px;
			}
		}
	}
	&.list-angle-double{				
		li{
			&:before{
				content: "\f101";
				font-size: 18px;
			}
		}
	}
	&.list-square{
		li{
			&:before{
				content: "\f45c";
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
	&.list-check{
		li{
			&:before{
				content: "\f109";
				font-family: flaticon;
				color: var(--bs-primary);
			}
		}
	}
	&.list-check-circle{
		li{
			padding: 14px 5px 14px 50px;
			
			&:before{
				content: "\f109";
				font-family: flaticon;
				color: var(--bs-primary);
				width: 40px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background-color: #fff;
				border-radius: 50%;
				box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
				top: 6px;
			}
		}
		&.list-light{
			li{
				&:before{
					background-color: rgba(var(--bs-primary-rgb), 0.05);
					box-shadow: none;
				}
			}
		}
	}
	&.list-check-circle-small{
		li{
			padding: 8px 8px 8px 30px;
			font-weight: 500;
			
			&:before{
				content: "\f00c";
				font-family: 'Font Awesome 6 Free';
				font-weight: 700;
				color: #fff;
				width: 18px;
				height: 18px;
				line-height: 18px;
				text-align: center;
				background-color: var(--bs-primary);
				border-radius: 50%;
				box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
				top: 10px;
				font-size: 10px;
			}
		}
	}
	&.list-plus-circle{
		li{
			&:before{
				content: "\f055";
				font-size: 18px;
				top: 5px;
			}
		}
	}
	&.list-check-try{
		li{			
			padding: 6px 0px 6px 30px;
			
			&:before{
				content: "\e83f";
				font-family: 'feather';
				position: absolute;
				color: #fff;
				width: 18px;
				height: 18px;
				line-height: 18px;
				text-align: center;
				background-color: var(--bs-primary);
				border-radius: 50% 50% 0% 50%;
				box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
				top: 9px;
				left: 0;
				font-size: 12px;
			}
		}
	}
	&.list-check-try{
		li{			
			padding: 4px 0px 4px 30px;
			
			&:before{
				content: "\e83f";
				font-family: 'feather';
				position: absolute;
				color: #fff;
				width: 18px;
				height: 18px;
				line-height: 18px;
				text-align: center;
				background-color: var(--bs-primary);
				border-radius: 50% 50% 0% 50%;
				box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
				top: 7px;
				left: 0;
				font-size: 12px;
			}
		}
	}
	&.list-arrow-left-circle,
	&.list-arrow-right-circle{
		li{
			&:before{
				font-size: 10px;
				top: 10px;
				height: 20px;
				width: 20px;
				background-color: #888888;
				border-radius: 50px;
				text-align: center;
				line-height: 21px;
			}
		}
	}
	&.list-arrow-right-circle{
		li{
			&:before{
				content: "\f054";
				padding-#{$dz-pos-left}: 1px;
			}
		}
	}
	&.list-arrow-left-circle{
		li{
			&:before{
				content: "\f053";
				padding-#{$dz-pos-right}: 1px;
			}
		}
	}
	&.grid-2{
		display: flex;
		flex-wrap: wrap;
		li{
			width: 50%;
		}
		@include respond('phone'){
			li{
				width: 100%;
			}
		}
	}
}
.list-square-check{
	li{
		padding: 10px 15px 10px 60px;
		min-height: 45px;
		font-weight: 600;
		color: var(--bs-heading-color);    
		margin-bottom: 15px;
		&:before{
			content: "\f00c";
			top: 50%;
			height: 45px;
			width: 45px;
			line-height: 45px;
			background-color: rgba(var(--bs-primary-rgb), 0.1);
			color: #000;
			text-align: center;
			padding: 0 0 0 0;
			@include transitionSlow;
			transform: translateY(-50%);
		}
		&:hover{
			&:before{
				background-color: var(--bs-primary);
				color: #fff;
			}
		}
	}
}

.list-number-circle{
	li{
		padding: 0px 15px 0px 70px;
		position:relative;
		margin-bottom:30px;
		&:after{
			content: attr(data-text);
			position:absolute;
			#{$dz-pos-left}:0;
			top:0;
			height:50px;
			width:50px;
			line-height:50px;
			text-align:center;
			border-radius:50px;
			background:var(--bs-primary);
			color:#fff;
			font-family:var(--font-family-title);
			font-size:24px;
			font-weight:600;
		}
		p{
			margin-bottom:0;
		}
	}
}
.list-square-box{
	li{
		padding: 0px 0 0px 25px;
		position:relative;
		margin-bottom:30px;
		&:after{
			content: "";
			position:absolute;
			#{$dz-pos-left}:0;
			top:10px;
			height:12px;
			width:12px;
			background:var(--bs-primary);
		}
		p{
			margin-bottom:0;
			font-size:17px;
		}
	}
}
.list-check-box{
	li{
		padding: 20px 10px 20px 70px;
		position:relative;
		margin-bottom:10px;
		color:#fff;
		background:var(--bs-secondary);
		font-size:24px;
		font-family:var(--font-family-title);
		border-radius:var(--border-radius-base);
		text-transform:uppercase;
		margin-#{$dz-pos-right}:40px;
		@include transitionSlow;
		font-weight:500;
		&:after{
			content: "\f058";
			font-size: 25px;
			font-weight: 500;
			position:absolute;
			#{$dz-pos-left}:30px;
			color:#fff;
			font-family: "Font Awesome 5 Free";
			top:50%;
			transform:translateY(-50%);
		}
		&:hover{
			background:var(--bs-primary);
			margin-#{$dz-pos-right}:0;
		}
		@include custommq ($max:1200px){
			font-size:20px;
		}
		@include respond ('phone'){
			font-size: 18px;
			padding:20px 10px 20px 55px;
			&:after{
				#{$dz-pos-left}:20px;
			}
		}
	}
}
.list-style-1{
	li{
		padding: 14px 5px 14px 75px;
		position: relative;
		
		&:before{
			content: "\f109";
			font-family: flaticon;
			color: var(--bs-primary);
			width: 60px;
			height: 60px;
			line-height: 60px;
			text-align: center;
			position: absolute;
			left: 0;
			background-color: #fff;
			border-radius: 50%;
			top: 10px;
			font-size: 20px;
		}
		.title{
			font-size: 18px;
			margin-bottom: 5px;
		}
		p{
			font-size: 15px !important;
			font-weight: 400 !important;
			
			&:last-child{
				margin-bottom: 0;
			}
		}
	}
	&.list-lg{
		li{
			padding: 18px 5px 18px 75px;
			
			&:before{
				top: 20px;
			}
			.title{
				font-size: 24px;
				margin-bottom: 7px;
			}
			p{
				font-size: 16px !important;
			}
			@include respond ('tab-land'){
				padding: 12px 5px 12px 75px;
				
				&:before{
					top: 15px;
				}	
				.title{
					font-size: 20px;
				}
				p{
					font-size: 15px !important;
				}
			}
		}
	}
	&.list-sm{
		li{
			padding: 12px 5px 12px 65px;
			
			&:before{
				width: 50px;
				height: 50px;
				line-height: 50px;
				font-size: 18px;
			}
			.title{
				font-size: 16px;
			}
			p{
				font-size: 14px !important;
			}
		}
	}
}