.accordion{
	&.style-1{
		.accordion-item{
			border-bottom:1px solid var(--border);
			margin-bottom:0;
			&:last-child{
				border-bottom:0;
			}
		}
		.accordion-header{
			border:0;
			display: flex;
			flex-flow:wrap;
			align-items: center;
			background:var(--primary);
			justify-content: space-between;
			@include transitionFast;
			border-radius:$radius $radius 0 0;
			border-bottom:1px solid #425e71;
			padding:18px 4.0625rem 5px 30px;
			@include respond ('tab-land'){
				padding: 18px 2.0625rem 5px 30px;
			}
			&>span{
				color:$white;
				font-size:14px;
			}
			.user-info{
				color:$white;
				a{
					color:$white;
				}
			}
			.accordion-header-indicator:before{
				content:"\f078";
				font-family: 'Font Awesome 6 Free';
				font-size:1rem;
				color:#fff;
				font-weight: 900;
			}
			.profile-image{	
				position:relative;
				margin-right:20px;
				img{
					height:63px;
					width:63px;
					border-radius:$radius;
					@include transitionFast;
				}
				span{
					height:36px;
					width:36px;
					line-height:28px;
					text-align:center;
					display:inline-block;
					border:2px solid $white;
					border-radius:3rem;
					position: absolute;
					bottom: -2px;
					right: -10px;
				}
			}
			&.collapsed{
				background:transparent;
				border-bottom:0;
				&>span{
					color:var(--text);
				}
				.user-info{
					color:var(--text-dark);
					a{
						color:var(--text-dark);
					}
				}
				.accordion-header-indicator:before{
					content:"\f054";
					color:#d3d6e4;
				}
				.profile-image{	
					img{
						height:63px;
						width:63px;
						border-radius:$radius;
					}
				}
			}
			&>*{
				padding-right:15px;
				margin-bottom:15px;
			}
		}
		.accordion-body-text{
			padding:1.5rem 1.75rem 0.625rem 1.75rem;
		}
		.accordion_body{
			border-radius: 0 0 $radius $radius;
			@include transitionFast;
			&.show{
				@include transitionFast;
				
							
			}
			.payment-details{
				display:flex;
				flex-flow:wrap;
				justify-content:space-between;
				.info{
					display:flex;
					padding: 8px 15px;
					align-items:center;
					background:var(--light	);
					border-radius:$radius;
					svg{
						path{
							fill:#393939;
						}
					}
				}
				span{
					font-size:1rem;
				}
			}
		}
	}
}
.action{
	z-index: 1;
    height: auto;
	border-radius:8px 8px 0 0;
	padding: 2rem 2rem;
	position:relative;
	overflow: hidden;
	background: rgba(24, 133, 167, 1);

	&:after{
		z-index: -1;
		position: absolute;
		height: 140px;
		width: 160px;
		content: "";
		bottom: 0;
		right: 0;
		background-image: url(../images/Ellipse.png);
		background-size: cover;
		background-position: inherit;
		background-repeat: no-repeat;	
		animation: move3 2s infinite alternate; /* Define the animation */
	}
}
.invoice-list{
	display: flex;
    align-items: center;
    padding: 15px 30px;
    border-bottom: 1px dashed var(--border);

	&:last-child{
		border-bottom:0;
	}
	img{
		height:50px;
		width:50px;
		border-radius:$radius;
	}
}
#pieChart{
	height: 150px!important;
}
.move-1 {
	-webkit-animation: move1 5s infinite;
	animation: move1 5s infinite; }
  
  .move-2 {
	-webkit-animation: move2 5s infinite;
	animation: move2 5s infinite; }
  
  .move-3 {
	-webkit-animation: move3 5s infinite;
	animation: move3 5s infinite; }
  
  @-webkit-keyframes move1 {
	0% {
	  -webkit-transform: rotate(-1deg) translate(-2px, -2px);
	  transform: rotate(-1deg) translate(-2px, -2px); }
	50% {
	  -webkit-transform: rotate(1deg) translate(2px, 2px);
	  transform: rotate(1deg) translate(2px, 2px); }
	100% {
	  -webkit-transform: rotate(-1deg) translate(-2px, -2px);
	  transform: rotate(-1deg) translate(-2px, -2px); } }
  @keyframes move1 {
	0% {
	  -webkit-transform: rotate(-1deg) translate(-2px, -2px);
	  transform: rotate(-1deg) translate(-2px, -2px); }
	50% {
	  -webkit-transform: rotate(1deg) translate(2px, 2px);
	  transform: rotate(1deg) translate(2px, 2px); }
	100% {
	  -webkit-transform: rotate(-1deg) translate(-2px, -2px);
	  transform: rotate(-1deg) translate(-2px, -2px); } }
  @-webkit-keyframes move2 {
	0% {
	  -webkit-transform: rotate(1deg) translate(2px, 2px);
	  transform: rotate(1deg) translate(2px, 2px); }
	50% {
	  -webkit-transform: rotate(-1deg) translate(-2px, -2px);
	  transform: rotate(-1deg) translate(-2px, -2px); }
	100% {
	  -webkit-transform: rotate(1deg) translate(2px, 2px);
	  transform: rotate(1deg) translate(2px, 2px); } }
  @-webkit-keyframes move3 {
	0% {
	  transform: translate(0, 0); }
	20% {
	  transform: translate(5px, 0); }
	40% {
	  transform: translate(5px, 5px); }
	65% {
	  transform: translate(0, 5px); }
	65% {
	  transform: translate(5px, 0); }
	100% {
	  transform: translate(0, 0); } }