.card-bx{
	position:relative;
	z-index: 1;
	border-radius:$radius;
	overflow:hidden;
	padding: 8px 35px;
	display:flex;
	.card-info{
		padding-top: 30px;
		flex:1;
		h2{
			font-size:36px;
		}
	}
	.change-btn{
		writing-mode: tb;
		position:relative;
		font-weight:600;
		background:$white;
		color:$black;
		border-radius:1.25rem;
		transform: rotate(-180deg);
		font-size:17px;
		padding:20px 23px;
		.reload-icon{
			height:53px;
			width:53px;
			line-height:53px;
			background:#fafafa;
			color:#969ba0;
			border-radius:1.25rem;
			text-align:center;
			font-size:20px;
			margin:10px -15px -10px;
			float:right;
			@include transitionMedium;
			i{
				@include transitionSlow;
			}
		}
		.up-ico{
			margin-bottom: 20px;
			color:#9fa4a6;
		}
		&:after{
			content:"";
			position:absolute;
			right:10px;
			z-index: -1;
			top:50%;
			transform:translateY(-50%);
			width:100%;
			height:90%;
			border-radius:inherit;
			background:rgba($white,0.3);
		}
	}
	@include respond ('phone'){
		padding: 15px 15px;
		.card-info{
			padding-top:15px;
			h2{
				font-size:30px;
			}
		} 
		.change-btn{
			padding: 15px 15px;
		}
	}
}

.card-slider{
	margin-bottom:30px;
	&.owl-carousel{
		.owl-item {
			.card-info{
				.circle-img{
					width:62px;
					position: absolute;
					top: 20px;
					right: 16px;
				}
				.top-img{
					position: absolute;
					bottom: 0;
					width: 140px;
					right: -19px;
					z-index: -1;	
				}
				.bottom-img{
					position: absolute;
					top: 0px;
					left: -1px;
					width: 137px;
					z-index: -1;	
				}
				.top-img1{
					position: absolute;
					top: 0;
					right: -18px;	
					width: 157px;
					z-index: -1;
				}
				.bottom-img1{
					position: absolute;
					bottom: -2px;
					left: -5px;
					width: 113px;
					transform: rotate(186deg);
					z-index: -1;	
				}
				.top-img2{
					position: absolute;
					top: 0;
					right: -14px;
					width: 114px;	
					z-index: -1;	
				}
				.bottom-img2{
					position: absolute;
					bottom: 0;
					left: -13px;
					width: 143px;
					z-index: -1;	
				}
				.bottom-img4{
					position: absolute;
					bottom: -2px;
					left: -5px;
					width: 113px;
					z-index: -1;
				}
			}
		}
	}
	.card-bx{
		height: 224px;
		padding: 10px 30px;
		@include respond ('phone'){
			height:220px;
		}
	}
}
.bg-blue{
	background:#306FEA;
}
.bg-orange{
	background:#FFB320;		
}
.bg-purpe{
	background:#C93BBB;		
}
.bg-red{
	background:#F83838;	
}
.pieChart2{
	position:relative;
	img{
		position: absolute;
		top: 6.5rem;
		left: 9rem;	
	}
}

.card-type{
	padding: 0 25px;	
	&:hover{
		background:var(--rgba-primary-1);	
	}	
}
.current-icon a{
    height: 3rem;
    width: 3rem;
    background: #09BD3C;
    display: block;
    border-radius: 50%;
    line-height: 3rem;
    text-align: center;
    color: white;
    font-size: 1rem;
    transform: rotateZ(45deg);

}