* {
	box-sizing: border-box;
	transition: all ease 0.3s;
}
html {
	height: 100%;
	display: flex;
	flex-direction: column;
}
body {
	padding: 0;
	margin: 0;
	background: #2F3236;
	font-family: "Poppins", sans-serif;
	height: 100%;
}

#login {
	background: url(../images/login-bg.png) no-repeat!important;
	background-size: cover;
	background: center center;
}

.wrap {

}
.login-grid {
	width: 440px;
	margin: 0 auto;
	margin-top: 7%;
}
	.logo {
		text-align: center;
	}
		.logo img {
			width: 156px;
		}
		.logo h2 {
			font-size: 20px;
			font-weight: 700;
			color: #333333;
		}
	.login {
		padding: 40px;
		background: #fff;
		margin-top: 32px;
		border-radius: 12px;
		box-shadow: 0px 44px 65px 0px rgba(176, 183, 195, 0.19);
	}
		.login h3 {
			font-size: 24px;
			font-weight: 700;
			margin: 0;
			margin-bottom: 30px;			
		}
			.login h3 small {
				display: block;
				font-weight: 400;
				color: #6A6A6A;
				font-size: 18px;
				margin-bottom: 10px;
			}
		.login h4 {
			font-size: 24px;
			font-weight: 700;
			margin: 0;		
		}
			.login p {
				font-weight: 400;
				color: #1C1D1F;
				font-size: 14px;
				margin-top: 20px;
				margin-bottom: 20px;
			}
			.login .login-grp {
				margin-bottom: 24px;
				position: relative;
			}
				.login-grp label {
					font-weight: 500;
					color: #1C1D1F;
				}
				.label-grp {
					display: flex;
					justify-content: space-between;
				}
				.login .login-grp .input-text {
					width: 100%;
					display: block;
					background: #fff;
					border: 1px solid #D1D9E4;
					font-size: 16px;
					border-radius: 8px;
					padding: 12px 16px;
					margin-top: 12px;
				}
					.login .login-grp .input-text::placeholder {
						color: #aaa;
					}
					.login-grp .input-icon-grp, .login-grp .input-text-grp {
						position: relative;
					}
						.login-grp .input-icon-grp .input-text {
							padding-left: 40px;
						}
						.login-grp .input-icon-grp .input-icon {
							position: absolute;
							top: 12px;
							left: 12px;
						}
						.login-grp .input-icon-grp .eye-icon {
							position: absolute;
							top: 12px;
							right: 12px;
						}
						.login-grp .input-text-grp .eye-icon {
							position: absolute;
							top: 12px;
							right: 12px;
						}
				.login-grp button {
					border-radius: 4px;
					padding: 8px 15px;
					border: none;
					border-radius: 8px;
					background: linear-gradient(90deg, #3BA5E6 -25.14%, #D81860 124.58%);
					color: #fff;
					width: 100%;
					transition: all ease 0.3s;
					font-weight: 600;
				}
					.login-grp button:hover {
/*						box-shadow: 5px 10px 20px rgba(214, 27, 37, 0.25);*/
						transition: all ease 0.3s;
					}
			.login a {
				display: block;
				font-size: 14px;
				color: #D81860;
				transition: all ease 0.3s;
				text-decoration: none;
			}
				.login a:hover {
					text-decoration: underline;
					transition: all ease 0.3s;
				}
				.login a span {
					color: #AA72EF;
				}
.update-success {
	text-align: center;
}
	.update-success h2 {
		font-size: 27px;
		line-height: 32px;
		margin: 0 auto;
		margin-top: 24px;
	}
	.update-success p {
		margin:  0 auto;
		margin-top: 24px;
		margin-bottom: 24px;
		display: block;;
		font-size: 16px;
		line-height: 26px;
		color: #2F3236;
	}
		.update-success p span {
			color: #D81860;
		}
.login-link {
	text-decoration: none;
	text-align: center;
	font-size: 14px;
	color: #1C1D1F!important;
}
	.login-link span {
		color: #D81860!important;
		text-decoration: underline;
	}
.forgot-grp {

}
	.forgot-grp a {
		border: 2px solid #F7F7F9;
		font-weight: 600;
		font-size: 15px;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		padding: 24px;
		gap: 24px;
		border-radius: 12px;
		color: #1C1D1F;
		transition: all ease 0.3;
	}
		.forgot-grp a:hover {
			text-decoration: none;
			border: 2px solid #D81860;
			box-shadow: 0px 18px 36px -18px rgba(72, 72, 72, 0.25);
			transition: all ease 0.3;
		}



header {
	background: #1C1D1F;
	min-height: 20px;
	display: flex;
	justify-content: space-between;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	padding: 12px 24px;
	z-index: 2;
}
	header .logo {

	}
		header .logo a img {
			width: 80px;
		}
	header .admin {

	}
		header .admin a {
			height: 32px;
			width: 32px;
			overflow: hidden;
			display: block;
			border-radius: 32px;
		}
			header .admin a img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

.main-holder {
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	margin-top: 56px;
	min-height: calc(100vh - 56px);
}

/*NEW NAV*/
.nav {
	padding: 24px;
	position: fixed;
	display: flex;
	width: 284px;
	height: calc(100vh - 56px);
	left: 0;
	background: #2F3236;
	overflow-y: hidden;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}

.nav .nav-grid {
	margin-bottom: 16px;
	width: 100%;
}

.nav .nav-grid h3 {
	font-size: 12px;
	font-style: normal;
	line-height: 20px;
	/* 166.667% */
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: #fff;
}

.nav .nav-grid ul {
	list-style: none;
	padding: 0;
}

.nav .nav-grid ul li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.nav .nav-grid ul li:last-child {
	border-bottom: none;
}

.nav .nav-grid ul li a {
	font-size: 14px;
	font-weight: 400;
	color: #fff;
	text-decoration: none;
	padding: 20px 0;
	display: flex;
	align-items: center;
}

.nav .nav-grid ul li a i {
	width: 20px;
	margin-right: 8px;
	font-size: 16px;
	margin-top: -1px;
}

.nav .nav-grid ul li a .arrow {
	margin-left: auto;
	width: auto;
	margin-right: 0;
}

.nav .nav-grid ul li a:hover {
	color: #D81860;
}

.nav .nav-grid ul li.active a {
	color: #D81860;
}

.nav .nav-grid ul li .drp-list {
	list-style: none;
	padding-left: 29px;
	padding-bottom: 20px;
	display: none;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}

.nav .nav-grid ul li .drp-list li {
	border-bottom: none;
}

.nav .nav-grid ul li .drp-list li a {
	color: #fff;
	padding: 12px 0;
}

.nav .nav-grid ul li .drp-list li a:hover {
	color: #D81860;
}

.nav .nav-grid ul li .drp-list li.active a {
	color: #D81860;
}

/*END NEW NAV*/
	.main {
		padding: 24px;
		display: flex;
		height: 100%;
		flex: 1 1 0%;
		flex-direction: column;
		padding-left: 0;
	}
		.main .main-content {
			display: flex;
			flex: 1 1 0%;
			flex-direction: column;
			background: #fff;
			border-radius: 25px;
			margin-left: 284px;
			padding: 24px 100px;
			gap: 32px;
		}

.bread {

}
	.bread ol {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		gap: 16px;
	}
		.bread ol li {
		}
			.bread ol li:first-child:before {
				content: "";
				margin: 0;
			}
			.bread ol li a {
				font-size: 14px;
				text-decoration: none;
				color: #667085;
				padding: 6px 8px;
				border-radius: 6px;
			}
			.bread ol li:first-child a {
				padding: 0;
			}
			.bread ol li span {
				font-size: 14px;
				text-decoration: none;
				color: #D81860;
				padding: 6px 8px;
				border-radius: 6px;
				background: #F4F4F4;
				font-weight: 500;
			}
.main-content .content-title {

}
	.main-content .content-title h2 {
		padding: 0;
		margin: 0;
		font-size: 32px;
		color: #1C1D1F;
		font-weight: 700;
	}
.main-content hr {
	margin: 0;
	border-top: 1px solid #D1D9E4;
}

.list-holder {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

	.list-holder .tools {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
		.list-holder .tools .search {
			position: relative;
			display: flex;
			align-items: center;
			width: 30%;
		}
			.list-holder .tools .search img {
				position: absolute;
				left: 16px;
			}
			.list-holder .tools .search .text-search {
				padding: 8px 16px;
				font-size: 14px; 
				color: #1C1D1F;
				border: 1px solid #D1D9E4;
				border-radius: 12px;
				padding-left: 48px;
				width: 100%;
			}
	.list-holder .list {
		border: 1px solid #D1D9E4;
		border-radius: 15px;
	}
		.list-holder .list table {
			width: 100%;
		}
			.list-holder .list table thead tr, .list-holder .list table tbody tr {
				border-bottom: 1px solid #D1D9E4;
			}
				.list-holder .list table tbody tr:last-child {
					border: none;
				}
				.list-holder .list table thead th, .list-holder .list table tbody td {
					font-size: 14px;
					padding: 24px;
					color: #1C1D1F;
				}
				.list-holder .list table thead tr {
					background: #FAFBFC;
				}
					.list-holder .list table thead tr th {
						font-weight: 500;
						background: #FAFBFC;
						border-top-left-radius: 15px;
						border-top-right-radius: 15px;
					}
					.list-holder .list table tbody td a {
						text-decoration: none;
						color: #D81860;
					}
	.list-holder .list-footer {

	}
		.list-holder .list-footer .pager {
			display: flex;
			gap: 20px;
		}
			.list-holder .list-footer .pager ol {
				list-style: none;
				padding: 0;
				margin: 0;
				display: flex;
			}
				.list-holder .list-footer .pager ol li {

				}
					.list-holder .list-footer .pager ol li a {
						font-size: 14px;
						padding: 6px 12px;
						color: #30373D;
						text-decoration: none;
						display: inline-block;
						width: 33px;
						text-align: center;
					}
						.list-holder .list-footer .pager ol li.active a {
							background: #D81860;
							color: #fff;
						}
			.list-holder .list-footer .pager button {
				background: none;
				border: 1px solid #D1D9E4;
				padding: 8px 12px;
				border-radius: 12px;
			}
				.pager-prev {
					padding-left: 10px!important;
					padding-bottom: 10px!important;
				}
				.pager-next {
					padding-right: 10px!important;
					padding-bottom: 10px!important;
				}
					.list-holder .list-footer .pager button:disabled {
						opacity: 0.5;
					}
.cards {

}	
	.card-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24px;
		border: 1px solid #D1D9E4;
		border-radius: 15px;
	}	
		.card-item small {
			font-size: 13px;
			color: #6a6a6a;
			font-weight: 400;
		}
		.card-item h4 {
			margin: 0;
			font-size: 28px;
			font-weight: 700;
			margin-top: 8px;
		}
.missing-holder {
	padding: 5%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.missing {
	background: #fff;
	width: 80%;
	margin: 0 auto;
	margin-top: 56px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border-radius: 25px;
}
	.missing h2 {
		font-size: 180px;
		margin: 0;
		padding: 0;
		font-weight: 700;
		color: #1C1D1F;
	}
	.missing small {
		font-size: 20px;
		color: #6a6a6a;
	}
		.missing a {
			margin-top: 24px;
		}
.list-title{
	margin-right: 24px;
}
	.list-title h4 {
		margin-bottom: 0;
		font-weight: 600;
		color: #1C1D1F;
	}
.list-tabs {
	border-bottom: 2px solid #D1D9E4;
}
	.list-tabs ul {
		padding: 0;
		list-style: none;
		margin: 0;
	}
		.list-tabs ul li {
			display: inline-block;
		}
			.list-tabs ul a {
				padding: 14px 16px;
				display: flex;
				align-items: center;
				text-decoration: none;
				font-weight: 500;
				color: #CED0D8;
				border-bottom: 2px solid transparent;
				margin-bottom: -2px;
			}
				.list-tabs ul li.active a {
					color: #D81860;
					border-bottom: 2px solid #D81860;
				}
				.list-tabs ul a .badge {
					margin-left: 8px;
				}
.profile-holder {
	border: 1px solid #D1D9E4;
	border-radius: 15px;
	padding: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

	.profile-holder .profile {
		display: flex;
		align-items: center;
		gap: 24px;
	}
		.profile-holder .profile .pfp {
			width: 52px;
			height: 52px;
			overflow: hidden;
			border-radius: 52px;
		}
			.profile-holder .profile .pfp img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		.profile-holder .profile .profile-info {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}
			.profile-holder .profile .profile-info h4 {
				font-size: 24px;
				font-weight: 600;
				margin: 0;
				padding: 0;
				color: #1C1D1F;
			}
			.profile-holder .profile .profile-info .tags {
				display: flex;
				gap: 8px;
			}


.nav .logout {
	margin-top: auto;
	margin-bottom: 0;
}
	.logout ul {
		margin-bottom: 0;
	}
.profile-holder .profile .ads-img {
	width: 72px;
	height: 52px;
	overflow: hidden;
	border-radius: 8px;
}
	.profile-holder .profile .ads-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
.profile-actions {
	display: flex;
	gap: 12px;
}

.nav-child {
	list-style: none;
/*	padding: 0;*/
	padding-left: 36px!important;
}
	.nav-child li {

	}
		.nav-child li a {
			color: #fff!important;
		}
		.nav-child li.active a {
			color: #D81860!important;
		}
.tools .pager {
	display: flex;
	gap: 20px;
	border: 1px solid #D1D9E4;
	border-radius: 12px;
	padding: 6px;
}
	.tools .pager ol {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		gap: 8px;
	}
		.tools .pager ol li {
/*			margin-left: 16px;*/
		}
			.tools .pager ol li a {
				font-size: 14px;
				padding: 6px 12px;
				color: #30373D;
				text-decoration: none;
				display: inline-block;
				min-width: 33px;
				text-align: center;
				border-radius: 8px;
			}
				.tools .pager ol li a:hover {
					background: #e9e9e9;
					color: #30373D;
				}
				.tools .pager ol li.active a {
					background: rgba(216, 24, 96, 0.15);
					color: #D81860;
				}
				
	.tools .pager button {
		background: none;
		border: none;
	}
.list-holder .tools .calendar {
	position: relative;
	display: flex;
	align-items: center;
	width: 30%;
}
	.list-holder .tools .calendar img {
		position: absolute;
		right: 16px;
	}
	.list-holder .tools .calendar .text-calendar {
		padding: 8px 16px;
		font-size: 14px; 
		color: #1C1D1F;
		border: 1px solid #D1D9E4;
		border-radius: 12px;
		padding-right: 48px;
		width: 100%;
	}
.list-account-number {

}
	.list-account-number span {
		font-weight: 600;
		color: #D81860;
	}
		.list-account-number small {
			font-size: inherit;
			display: block;
		}

.card-multiple {
	padding: 0 24px;
	border: 1px solid #D1D9E4;
	border-radius: 15px;
}

.card-multiple-block {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.card-multiple-item {
	display: flex;
	gap: 24px;
	padding: 24px 0;
}

.card-multiple-item small {
	font-size: 13px;
	color: #6a6a6a;
	font-weight: 400;
}

.card-multiple-item h4 {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	margin-top: 8px;
}

.card-multiple-inline {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	height: 100%;
}

.card-inline-item {
	display: flex;
	gap: 24px;
	border-right: 1px solid #D1D9E4;
	padding: 24px;
	width: 33.3333%;
}

.card-inline-item small {
	font-size: 13px;
	color: #6a6a6a;
	font-weight: 400;
}

.card-inline-item h4 {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	margin-top: 8px;
}

.card-inline-item-2 {
	display: flex;
	gap: 24px;
	border-right: 1px solid #D1D9E4;
	padding: 24px;
	width: 50%;
}

.card-inline-item-2:last-child {
	border-right: none;
}

.card-inline-item-2 small {
	font-size: 13px;
	color: #6a6a6a;
	font-weight: 400;
}

.card-inline-item-2 h4 {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	margin-top: 8px;
}

.border-left {
	border-left: 1px solid #D1D9E4;
}

.border-right-none {
	border-right: none;
}

.vehicle-type {}

.vehicle-type h4 {
	font-size: 16px;
}

.vehicle-type p {
	color: #6a6a6a;
	margin-bottom: 0;
}

.vehicle-type small {
	color: #aaa;
	margin-bottom: 0;
	margin-right: 12px;
}

.reward {
	border-radius: 12px;
}

.title-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.conversion {
	display: flex;
	gap: 16px;
	align-items: center;
	border-radius: 12px;
	border: 1px solid #D1D9E4;
	padding: 6px;
}

.conversion img {
	padding-left: 12px;
}

.conversion span {
	font-size: 16px;
	font-weight: 600;
}

.tool-list {
	display: flex;
	gap: 16px;
}

.tool-list .search {}

.reward-holder {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.reward-img {
	border-radius: 12px;
}

.points {
	display: flex;
	gap: 64px;
}

.points .points-grp {
	text-align: right;
}

.points .points-grp small {
	font-size: 13px;
	color: #6a6a6a;
	font-weight: 400;
}

.points .points-grp h4 {
	color: #D81860;
	font-weight: 700;
}

/*NEW 09-11*/
.tools-grp {
	display: flex;
	gap: 16px;
	align-items: center;
}
	.tools-grp .calendar , .tools-grp .search{
		width: 300px!important;
	}
.details-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
	.details-grid h4 {
		margin-top: 0;
		font-size: 16px;
    	color: #171725;
	    font-weight: 600;
	    margin: 0;
	    padding-top: 16px;
	    border-top: 1px solid #D1D9E4;
	    margin-bottom: 8px;
	}
	.details-grp {
		display: flex;
/*		justify-content: space-between;*/
		flex-direction: column;
		color: #aaa;
	}
		.details-grp span {
			font-weight: 600;
			color: #333;
		}
#topup-details .offcanvas-body {
	padding-top: 0;
}
#topup-details .offcanvas-header {
	align-items: center;
}
#topup-details .offcanvas-header small {
	margin: 0;
}

/*FOR OVERVIEW 12/14*/
.card-gradient {
	background: linear-gradient(99deg, #D81860 -34.09%, #41A0E1 125.8%);
}

.card-gradient .card-content {}

.card-gradient .card-content small,
.card-gradient .card-content h4 {
	color: #fff;
}

.card-gradient i {
	color: #fff;
	font-size: 32px;
}

.card-gray {
	background: #D1D9E4;
}

.card-child {
	margin-top: 24px;
}

.card-borderless {
	border: none;
}

.card-panel {
	border: 1px solid #D1D9E4;
	border-radius: 15px;
	overflow: hidden;
}

.card-panel .card-gray {
	border-radius: 0;
}

.price-logs-holder {
	display: flex;
	justify-content: space-between;
}

.price-logs {}

.price-logs .logs-item {}

.price-logs .logs-item label {
	font-size: 12px;
	color: #6a6a6a;
}

.price-logs .logs-item span {
	font-size: 12px;
	color: #6a6a6a;
}

/*NEW for PWD/SC*/
.pwdsc {
	border-radius: 12px;
	border: 1px solid #D1D9E4;
	padding: 16px;
	display: flex;
}

.pwdsc-id {
	display: flex;
	align-items: center;
	gap: 16px;
}

.pwdsc-id img {
	width: 80px;
	border-radius: 8px;
}

.pwdsc-id .pwdsc-info {}

.pwdsc-id .pwdsc-info label {
	font-size: 14px;
	color: #6a6a6a;
	margin: 0;
}

.pwdsc-id .pwdsc-info h4 {
	font-size: 16px;
	color: #171725;
	margin: 0;
}

/*FOR Roles and Permission*/
.tr-1 {
	background: #e6e9eb;
	cursor: pointer;
}

.tr-1 td {
	font-weight: 600;
}

@media (max-width: 1560px) {
	.main .main-content {
		padding: 24px 50px;
	}
}

@media (max-width: 1436) {
	.main .main-content {
		padding: 24px;
	}
}
/*NEW 09-11*/
.tools-grp {
	display: flex;
	gap: 16px;
	align-items: center;
}

.tools-grp .calendar,
.tools-grp .search {
	width: 300px !important;
}

.details-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.details-grid h4 {
	margin-top: 0;
	font-size: 16px;
	color: #171725;
	font-weight: 600;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid #D1D9E4;
	margin-bottom: 8px;
}

.details-grp {
	display: flex;
	/*		justify-content: space-between;*/
	flex-direction: column;
	color: #aaa;
}

.details-grp span {
	font-weight: 600;
	color: #333;
}

#topup-details .offcanvas-body {
	padding-top: 0;
}

#topup-details .offcanvas-header {
	align-items: center;
}

#topup-details .offcanvas-header small {
	margin: 0;
}

.ngxImageZoomThumbnail{
	height: 43vh !important;
}







@media (max-width: 1560px) {
	.main .main-content {
		padding: 24px 50px;
	}
}

@media (max-width: 1436) {
	.main .main-content {
		padding: 24px;
	}
}