.pagination .page-item .page-link {
    width: 65px !important;
    border-radius: 65px !important;
}
.customDatatableSearch{
    border: 1px solid #B53;
    border-radius: 5px;
}
td {
    font-size: 14px;
}
.table td, .table th {
    white-space: normal;
}
.btn.btn-primary, .btn.bg-label-info, .btn.bg-label-warning{
    background-color: #0032a3 !important;
    color: #fff !important;
}
.btn.btn-primary:hover, .btn.bg-label-info:hover, .bg-label-warning:hover{
    background-color: #3971f2 !important;
    color: #fff !important;

}
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:after {
    color: #0032a3;
    transform: rotate(180deg);
}
.avatar.avatar-md.avatar-rounded.bg-money{
background-color: #8566ff;
}
.icons {
    margin-right: 6px;
}
.avatar-sm {
    font-size: .875rem;
    height: 38px!important;
    width: 36px!important;
    padding: 4px;
}
.navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item.active .nav-link:before, .navbar-vertical .navbar-nav .nav-item .collapsing .nav .nav-item.active .nav-link:before{
background: #0032a3 !important;
}
.navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item.active .nav-link, .navbar-vertical .navbar-nav .nav-item .collapsing .nav .nav-item.active .nav-link{
color: #0032a3 !important;

}
.funding-card {
    background: #e8e2ff;
    border-radius: 16px;
}
/* .nav-link.active .sidenav-normal{
color: #0032a3 !important;
} */
.navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item .nav-link.active:before, .navbar-vertical .navbar-nav .nav-item .collapsing .nav .nav-item .nav-link.active:before{
    background: #0032a3 !important  ;
}
.navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item .nav-link.active, .navbar-vertical .navbar-nav .nav-item .collapsing .nav .nav-item .nav-link.active{
color: #0032a3 !important;
}
.page-item.active .page-link {
    background-color: #00319f !important;
    border-color: #002f99 !important;
    color: #fff;
    z-index: 3;
}
.badge-dark{
    color: #000;
}
.total-aeps-report h6 {
    color: rgb(133, 133, 133);
    font-size: 12px;
    font-weight: 700;
}
.total-aeps-report p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
}
.total-aeps-report-pie {
    justify-content: center;
}
.report-cards-success,
.report-cards-pending,
.report-cards-failed,
.report-cards-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
    border-radius: 0.25rem;
    background-color: #fff;
    padding: 0.5rem;
}

.report-cards-success {
    border-bottom: 5px solid green;
}

.pie-graph-success {
    --c: green;
    --b: 5px;
}

.report-cards-pending {
    border-bottom: 5px solid orange;
}

.pie-graph-pending {
    --c: orange;
    --b: 5px;
}

.report-cards-failed {
    border-bottom: 5px solid red;
}

.pie-graph-failed {
    --c: red;
    --b: 5px;
}


.report-cards-total {
    border-bottom: 5px solid #18a3ae;
}

.pie-graph-total {
    --p: 100;
    --c: #18a3ae;
    --b: 5px;
}


.number-payment h6 {
    position: relative;
    top: 6px;
    font-size: 9px;
}

@property --p {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

.pietooltip {
    width: 100px !important;
}
.pie {
    width: 65%;
    aspect-ratio: 1;
    position: relative;
    display: inline-grid;
    place-content: center;
    font-size: 18px;
    font-weight: bold;
    font-family: sans-serif;
}

.pie:before,
.pie:after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.pie:before {
    inset: 0;
    background: radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b)
    var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p) * 1%), #0000 0);
    -webkit-mask: radial-gradient(
    farthest-side,
    #0000 calc(99% - var(--b)),
    #000 calc(100% - var(--b))
    );
    mask: radial-gradient(
    farthest-side,
    #0000 calc(99% - var(--b)),
    #000 calc(100% - var(--b))
    );
}
.pie:after {
    background: var(--c);
    transform: rotate(calc(var(--p) * 3.6deg))
    translateY(calc(50% - var(--w) / 2));
}
.animate {
    animation: p 2s 0.5s both;
}
@keyframes p {
    from {
        --p: 0;
    }
}

@media only screen and (max-width: 760px) {
    .report-cards-success,
    .report-cards-pending,
    .report-cards-failed,
    .report-cards-total {
        justify-content: space-evenly;
    }
}

.reportdivtooltip {
    text-transform: uppercase;
    cursor: help;
    position: relative;
    text-align: center;
}

.reportdivtooltip .reporttooltip {
    bottom: 100%;
    display: block;
    left: 0;
    margin-bottom: 15px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 200%;

}

.reportdivtooltiptotal .reporttooltip {
    left: -90% !important;

}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.reportdivtooltip .reporttooltip:before {
    bottom: -20px;
    content: " ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
}

/* CSS Triangles - see Trevor's post */
.reportdivtooltip .reporttooltip:after {
    border-left: solid transparent 10px;
    border-right: solid transparent 10px;
    border-top: solid #1496bb 10px;
    bottom: -10px;
    content: " ";
    height: 0;
    left: 25%;
    margin-left: -13px;
    position: absolute;
    width: 0;
}
.reportdivtooltiptotal .reporttooltip:after {
    left: unset !important;
    right: 25% !important;
}

.reportdivtooltip:hover .reporttooltip {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .reportdivtooltip .reporttooltip {
    display: none;
}
.lte8 .reportdivtooltip:hover .reporttooltip {
    display: block;
}

.pie-chart {
	background:
		radial-gradient(
			circle closest-side,
			transparent 60%,
			white 0
		);
	position: relative;
	width: 500px;
	min-height: 350px;
	margin: 0;
	outline: 1px solid #ccc;
}
.pie-chart h2 {
	position: absolute;
	margin: 1rem;
}
.pie-chart cite {
	position: absolute;
	bottom: 0;
	font-size: 80%;
	padding: 1rem;
	color: gray;
}
.pie-chart figcaption {
	position: absolute;
	bottom: 1em;
	right: 1em;
	font-size: smaller;
	text-align: right;
}
.pie-chart span:after {
	display: inline-block;
	content: "";
	width: 0.8em;
	height: 0.8em;
	margin-left: 0.4em;
	height: 0.8em;
	border-radius: 0.2em;
	background: currentColor;
}
.d-grid{
    display: grid;
}
.chartdiv {
    width: 100%;
    height: 500px;
}

.f-10 {
    font-size: 10px !important;
}
.f-16 {
    font-size: 16px !important;
}
.f-13 {
    font-size: 13px !important;
}
.bg-chart-gradient-dark{
    background-image:linear-gradient(193deg, #f1eeee, #000)
}

.select2-container{
    border: 1px solid #d2d6da;
}
.select2-search__field{
    width: 100%;
}
.table{
    border: 1px solid;
}
/* ................... New Css .................. */
main.main-content.bg-gray-100.position-relative.max-height-vh-100.h-100.mt-1.border-radius-lg.ps.ps--active-y {
    background: #fafafa;
    padding: 20px;
}