@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css");
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Roboto+Mono:400,500|Material+Icons");

/* MAIN DASHBOARD START */
.cp-color-card-row {
	margin: 0 0 20px 0;
	padding: 0px;
	float: left;
	width: 100%;
	clear: both;
}

.cp-color-card-row li {
	margin-right: 25px;
	float: left;
	width: calc(100% * (1/5) - 20px);
	list-style: none;
}

.cp-color-card-row li:hover .cp-color-box {
	-webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19);
    box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19);
}

.cp-color-card-row li .cp-color-box {
	padding:10px;
	display: flex;
	flex-direction: column;
	color: #fff;
	position: relative;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 15px 1px rgba(90, 90, 90, 0.08);
	box-shadow: 0 1px 15px 1px rgba(90, 90, 90, 0.08);
	-webkit-transition: -webkit-box-shadow .25s;
    transition: -webkit-box-shadow .25s;
    transition: box-shadow .25s;
    transition: box-shadow .25s,-webkit-box-shadow .25s;
}

.cp-color-card-row li .cp-color-box p {
	font-size: 14px;
	margin: 0px;
}

.cp-color-card-row li .cp-color-box h4 {
	font-size: 20px;
	margin: 0px;
	font-weight: 600;
}

.cp-color-card-row li .cp-color-box small {
	font-size: 12px;
	margin: 5px 0 0 0;
}

.cp-color-card-row .leads-widget-card {
	background: rgb(251,184,20);
	background: -moz-linear-gradient(90deg, rgba(251,184,20,1) 0%, rgba(255,211,117,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(251,184,20,1) 0%, rgba(255,211,117,1) 100%);
	background: linear-gradient(90deg, rgba(251,184,20,1) 0%, rgba(255,211,117,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fbb814",endColorstr="#ffd375",GradientType=1);
}
.cp-color-card-row .invoices-widget-card {
	background: rgb(242,118,89);
	background: -moz-linear-gradient(90deg, rgba(242,118,89,1) 0%, rgba(246,167,27,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(242,118,89,1) 0%, rgba(246,167,27,1) 100%);
	background: linear-gradient(90deg, rgba(242,118,89,1) 0%, rgba(246,167,27,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f27659",endColorstr="#f6a71b",GradientType=1);
}
.cp-color-card-row .tasks-widget-card {
	background: rgb(0,139,183);
	background: -moz-linear-gradient(90deg, rgba(0,139,183,1) 0%, rgba(94,186,233,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(0,139,183,1) 0%, rgba(94,186,233,1) 100%);
	background: linear-gradient(90deg, rgba(0,139,183,1) 0%, rgba(94,186,233,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#008bb7",endColorstr="#5ebae9",GradientType=1);
}
.cp-color-card-row .estimates-widget-card {
	background: rgb(9,116,59);
	background: -moz-linear-gradient(90deg, rgba(9,116,59,1) 0%, rgba(48,179,74,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(9,116,59,1) 0%, rgba(48,179,74,1) 100%);
	background: linear-gradient(90deg, rgba(9,116,59,1) 0%, rgba(48,179,74,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#09743b",endColorstr="#30b34a",GradientType=1);
}
.cp-color-card-row .clients-widget-card {
	background: rgb(79,47,142);
	background: -moz-linear-gradient(90deg, rgba(79,47,142,1) 0%, rgba(122,95,157,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(79,47,142,1) 0%, rgba(122,95,157,1) 100%);
	background: linear-gradient(90deg, rgba(79,47,142,1) 0%, rgba(122,95,157,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4f2f8e",endColorstr="#7a5f9d",GradientType=1);
}

.cp-color-card-row li .cp-color-box::after {
	content: '';
	height: 73px;
    position: absolute;
    top: 0px;
    right: 10px;
	width: 85px;
	z-index: 1;
}

.cp-color-card-row .invoices-widget-card::after {
	background: url('/assets/images/dashboard/Dashboard_web_Invoces.png') no-repeat 100% 100%;
}

.cp-color-card-row .estimates-widget-card::after {
	background: url('/assets/images/dashboard/Dashboard_web_Estimates.png') no-repeat 100% 100%;
	top: 3px;
}
.cp-color-card-row .leads-widget-card::after {
	background: url('/assets/images/dashboard/Dashboard_web_Leads.png') no-repeat 100% 100%;
}

.cp-color-card-row .tasks-widget-card::after {
	background: url('/assets/images/dashboard/Dashboard_web_Task.png') no-repeat 100% 100%;
}

.cp-color-card-row .clients-widget-card::after {
	background: url('/assets/images/dashboard/Dashboard_web_Clients.png') no-repeat 100% 100%;
}
.cp-color-card-row li:last-child {
	margin-right: 0px;
}

.progress-bar-card {
	margin: 0px;
	padding: 20px;
	float: left;
	width: 100%;
	background-color: #fff;
	border-radius: 10px;
	box-sizing: border-box;
}

.progress-bar-card ul {
	margin: 0px;
	padding: 0px;
}

.progress-bar-card ul li {
	width: 50%;
	float: left;
	margin: 0px;
	list-style: none;
	padding: 0 20px;
}

.progress-bar-card ul li:last-child{
	border-left: solid 1px #dedede;
}

.progress-bar-card ul li h4 {
	font-size: 20px;
	font-weight: 600;
	color: #222;
	text-align: center;
	position: relative;
	padding-bottom: 20px;
}

.progress-bar-card ul li h4::after {
	content: '';
	width: 120px;
	height: 2px;
	background: #e82529;
	position: absolute;
	margin: 0 auto;
	left: 0;
    right: 0;
	bottom: 8px;
	display: flex
}

.progress-bar-card ul li h4 span {
	font-weight: 300;
}

.progress-bar-card ul li p {
	display: flex;
	align-items: center;
    justify-content: space-between;
	font-size: 12px;
	color: #222;
	font-weight: 600;
	margin: 2px 0;
}

.progress-bar-card ul li p span {
	font-weight: 300;
	color: #aaa8a8;
}

.pl-0 {
	padding-left: 0px !important;
}

.progress-bar-card-bottom {
	float: left;
	width: calc(100% * (1/3) - 20px);
	margin-right: 25px;
	border-left: solid 4px #e82529;
	background: #fff;
	-webkit-box-shadow: 0 1px 15px 1px rgba(90, 90, 90, 0.08);
	box-shadow: 0 1px 15px 1px rgba(90, 90, 90, 0.08);
	border-radius: 4px;
	padding: 15px 10px;
	height: 80px;
    display: flex;
    align-items: center;

}

.progress-bar-card-bottom:last-child {
	margin-right: 0px;;
}

.progress-bar-card-bottom h6 {
	margin: 0px;
	font-size: 18px;
	font-weight: 600;
	color: #222;
}

.progress-bar-card-bottom span {
	display: block;
	font-size: 14px;
	color: #222;
}

.progress-bar-card-bottom i {
	width: 50px;
	height: 50px;
	float: left;
	margin-right: 15px;
	display: flex;
    align-items: center;
    justify-content: center;
}
.progress-bar-card-bottom i img {
	max-width: 100%;
}

.progress-bar-card-bottom-content {
	overflow: hidden;
}

@media (max-width: 1025px) {
	.cp-color-card-row li {
		width: calc(100% * (1/4) - 20px);
		margin-bottom: 20px;
		margin-right: 20px;
	}	
}

@media (max-width: 991px) {
	.cp-color-card-row li {
		width: calc(100% * (1/2) - 20px);
		margin-bottom: 20px;
		margin-right: 20px;
	}	
}

@media (max-width: 767px) {
	.cp-color-card-row li {
		width: calc(100% * (1/1) - 0px);
		margin-bottom: 20px;
		margin-right: 0px;
	}

	.progress-bar-card-bottom {
		width: calc(100% * (1/1) - 0px);
		margin-bottom: 20px;
		margin-right: 0px;
	}
}

@media (max-width: 640px) {
	.progress-bar-card ul li {
		width: 100%;
		padding: 15px;
		margin-bottom: 20px;
	}
	.progress-bar-card ul li:last-child {
		border-left: 0px;
		border-top: solid 1px #dedede;
		margin-bottom: 0px;
	}

	.pl-0 {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
 }

/* MAIN DASHBOARD END */


/* Tool Mileage CSS Start */
.tool-cp-mileage {
	margin: 0px;
	padding: 0px;
	float: left;
	width: 100%;
	text-align: center;
}

.tool-img-card {
	width: 100%;
}

.tool-img-card img {
	max-width: 100%;
}

.tool-img-card h1 {
	font-size: 28px;
	color: #000;
}


.tool-img-card h4 {
	margin-top: 30px;
	font-size: 22px;
	color: #000;
}

.tool-icon-card {
	width: 100%;
	text-align: center;
	display: block;
	margin: 40px 0 0 0;
	float: left;
}

.tool-icon-card img {
	max-width: 100%;
	margin: 0 0 10px 0;
}

.tool-icon-card h6 {
	font-size: 19px;
	color: #000;
}

.too-cp-footer {
	width: 100%;
	text-align: center;
	display: block;
	margin: 40px 0 0 0;
	float: left;
}

.too-cp-footer h5 {
	font-size: 18px;
	color: #000;
	margin-bottom: 25px;
}

.too-cp-footer h5 span {
	color: #e82629;
}

.too-cp-footer .btn-red {
	font-weight: 700;
	margin-bottom: 10px;
	padding: 25px 45px;
}

.too-cp-footer {
	font-size: 16px;
	color: #000;
}

/* Tool Mileage CSS End */

/* Directory Leading Page CSS Start */
.cp-card-heading-1 h1 {
	margin-top: 13px !important;
}

.bg-light1 {
	background: #f6f7fb !important;
	float: left;
	width: 100%;
}

.bg-light-2 {
	background: #eff0f1 !important;
}

.icon-down {
	background: #f19393;
	color: #fff;
	width: 25px;
	height: 25px;
	margin-top: 20px;
	border-radius: 100%;
	cursor: pointer;
}

.heading-4-with-count {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 20px 0;
}

.heading-4-with-count h4 {
	color: #040707;
	margin: 0px;
	font-size: 28px;
	display: flex;
	align-items: center;
	justify-content: left;
	width: 100%;
	font-weight: 700;
}

.heading-4-with-count span {
	width: 65px;
	height: 65px;
	background: #e0e2e2;
	color: #19233c;
	font-size: 40px;
	margin-right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	font-weight: 700;

}

.cp-row-grid {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

@media (max-width: 767px) {
	.cp-row-grid {
		margin-bottom: 20px;
	}
}

.cp-row-grid img {
	max-width: 100%;
}

.cp-row-grid h5 {
	font-size: 24px;
	color: #040707;
	font-weight: 700;

}

.cp-row-grid p {
	font-size: 16px;
	color: #040707;
}

.cp-alerts-box {
	width: 100%;
	float: left;
	border-radius: 10px;
	border: solid 1px #e82629;
	padding: 50px 90px;
	margin: 90px 0 10px 0;
}

@media (max-width: 767px) {
	.cp-alerts-box {
		padding: 20px;
		margin: 45px 0 10px 0;
	}
}

.cp-alerts-box .btn {
	padding: 15px 25px !important;
	width: 170px;
	margin-top: 40px;
}

.cp-alerts-box span {
	font-size: 100px;
	color: #e82629;
	float: left;
	margin-right: 20px;
}

@media (max-width: 767px) {
	.cp-alerts-box span {
		font-size: 60px;
	}
}

.cp-alerts-box p {
	font-size: 20px;
	color: #e82629;
	overflow: hidden;
}

.cp-alerts-box p strong {
	display: block;
	margin-top: 3px;
	font-size: 22px;
	font-weight: 800;
}

.pl-pr {
	padding: 0 12%;
}

@media (max-width: 1050px) {
	.pl-pr {
		padding: 0px 15px !important;
		clear: both;
	}
}


.your-listing-with-cp {
	width: 100%;
	padding: 60px 0;

}

.your-listing-with-cp h2 {
	font-size: 28px;
	color: #040707;
	margin: 0 0 30px 0;
	padding-bottom: 20px;
	clear: both;
}

.your-listing-with-cp h2 span {
	position: relative;
}

.your-listing-with-cp h2 span::before {
	content: '';
	background: #e82629;
	width: 200px;
	height: 1px;
	position: absolute;
	bottom: -18px;
	left: 0px;
}

.your-listing-with-cp-container {
	padding-left: 90px;
}

@media (max-width: 1050px) {
	.your-listing-with-cp-container {
		padding: 0px 15px !important;
	}
}

.your-listing-with-cp-container img {
	width: 285px;
	height: 285px;
	object-position: top;
	object-fit: cover;
	float: left;
	margin-right: 30px;
}

@media (max-width: 767px) {
	.your-listing-with-cp-container img {
		margin: 0 auto 15px auto;
		display: table;
		float: none;
	}
}

.your-listing-with-cp-row {
	overflow: hidden;
}

@media (max-width: 767px) {
	.your-listing-with-cp-row {
		display: block;
		width: 100%;
	}
}


.your-listing-with-cp-row-header {
	display: flex;
	justify-content: space-between;
}

@media (max-width: 1160px) {
	.your-listing-with-cp-row-header {
		justify-content: center;
		flex-direction: column;
	}

	.your-listing-with-cp-row-header .btn {
		margin: 10px 0;
	}
}

.your-listing-with-cp-row-header h4 {
	font-size: 25px;
	color: #040707;
	font-weight: 500;
	margin: 0px;
}

.your-listing-with-cp-row-header span {
	display: block;
	font-size: 16px;
}

.your-listing-with-cp-row-header span i {
	color: #e82629;
	font-size: 16px;
}

.your-listing-with-cp-row-body {
	width: 100%;
}

.your-listing-with-cp-row-body h6 {
	color: #bdbdbe;
	font-size: 16px;
	float: left;
	margin: 0px 16px 0 0;
}

.your-listing-with-cp-row-body-content {
	overflow: hidden;
}

.your-listing-with-cp-row-body-content {
	margin-bottom: 20px;
}

.your-listing-with-cp-row-body-content p {
	font-size: 16px;
	color: #040707;
}

.your-listing-with-cp-row-body-content ul {
	margin: 0px;
	padding: 0px;
	width: 50%;
	float: left;
}

@media (max-width: 1160px) {
	.your-listing-with-cp-row-body-content ul {
		width: 100%;
	}
}

.your-listing-with-cp-row-body-content li {
	font-size: 14px;
	color: #e82629;
	float: left;
	width: 100%;
}

.your-listing-with-cp-row-body-content li span {
	display: inline-block;
	font-size: 16px;
	color: #040707;
	position: relative;
	padding-left: 16px;
}

.your-listing-with-cp-row-body-content li span::before {
	background: #e82629;
	border-radius: 100%;
	content: '';
	font-size: 18px;
	margin-right: 15px;
	position: absolute;
	top: 8px;
	left: 0px;
	width: 6px;
	height: 6px;
}

.cp-free-lead-row {
	margin: 50px 0;
	float: left;
	width: 100%;
}

.cp-free-lead-row .heading-4-with-count {
	margin: 0px 0 40px 0 !important;
}

.cp-free-lead-row h4 {
	font-size: 24px;
	color: #040707;
	font-weight: 700;
}

.cp-free-lead-row p {
	font-size: 16px;
	color: #040707;
}

.cp-free-lead-row .btn {
	width: 200px;
	height: 40px;
	line-height: 16px;
}

.cp-free-lead-row .cp-free-lead-content {
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 767px) {
	.cp-free-lead-row .cp-free-lead-content {
		flex-direction: column;
	}
}

.cp-free-leads-text {
	overflow: hidden;
}

.cp-free-lead-content img {
	float: right;
	margin-left: 30px;
	max-width: 100%;
	width: 350px;
	height: auto;
	margin-right: 0px;
}

@media (max-width: 1160px) {
	.cp-free-lead-content img {
		margin-bottom: 20px;
	}
}

.configuration-container {
	padding-top: 40px;
	padding-bottom: 40px;
}

.configuration-container .your-listing-with-cp {
	padding: 0px !important;
}

.configuration-container h4 {
	font-size: 24px;
	color: #040707;
	font-weight: 700;
}

.configuration-container ul {
	margin: 0px;
	padding: 0px;
}

.configuration-container ul li {
	list-style: disc;
	width: 50%;
	float: left;
	font-size: 14px;
	color: #e82629;

}

@media (max-width: 1160px) {
	.configuration-container ul li {
		width: 100%;
	}
}

.configuration-container ul li span {
	display: inline-block;
	font-size: 16px;
	color: #040707;
	position: relative;
}

.configuration-container .configuration-row {
	width: 100%;
	display: block;
	float: left;
	margin-bottom: 30px;
	;
}

.cp-green-btn-gr {
	background: rgb(118, 192, 67);
	background: -moz-linear-gradient(184deg, #76c043 0%, #32823a 100%);
	background: -webkit-linear-gradient(184deg, #76c043 0%, #32823a 100%);
	background: linear-gradient(184deg, #76c043 0%, #32823a 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#76c043", endColorstr="#32823a", GradientType=1);
	color: #fff;
}

.cp-green-btn-gr:hover,
.cp-green-btn-gr:focus {
	background: rgb(50, 130, 58);
	background: -moz-linear-gradient(184deg, rgba(50, 130, 58, 1) 0%, rgba(118, 192, 67, 1) 100%);
	background: -webkit-linear-gradient(184deg, rgba(50, 130, 58, 1) 0%, rgba(118, 192, 67, 1) 100%);
	background: linear-gradient(184deg, rgba(50, 130, 58, 1) 0%, rgba(118, 192, 67, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#32823a", endColorstr="#76c043", GradientType=1);
}

/* Directory Leading Page CSS End */



/* Directory page CSS Start */
.directory-client-page {
	background: #eff0f1;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	box-sizing: border-box;
	float: left;
}

@media (max-width: 1050px) {
	.directory-client-page {
		flex-direction: column;
		text-align: center;
	}

}

.directory-client-page img {
	max-width: 100%;
	float: left;
	padding: 30px;
}

@media (max-width: 1050px) {
	.directory-client-page img {
		width: 60%;
		margin: 0 auto;
		display: table;
		float: none;
	}
}

@media (max-width: 640px) {
	.directory-client-page img {
		width: 100%;
	}
}


.directory-client-page h1 {
	margin: 0 0 30px 0;
	padding: 0px;
	font-size: 32px;
	font-weight: 700;
}

.directory-client-page h4 {
	font-size: 18px;
	font-weight: 400;
	margin: 0px;
	padding: 0px;
	color: #000;
}

.directory-client-page h4 strong {
	color: #e82629;
}

.directory-client-page p {
	font-size: 17px;
	font-weight: 400;
	color: #000;
	text-align: center;
	margin-top: 30px;
}

.directory-client-page p span {
	display: block;
}

.directory-client-page .cp-card {
	float: left;
	width: calc(100% * (1/3) - 30px);
	margin-right: 30px;
	;
}

@media (max-width: 1050px) {
	.directory-client-page .cp-card {
		width: calc(100% * (1/1) - 0px);
		margin-right: 0px;
		margin-bottom: 30px;
	}
}


.directory-client-page .cp-card:last-child {
	margin-right: 0px;
}

.directory-client-page .btn {
	text-transform: capitalize;
	font-weight: 950 !important;
	font-size: 16px !important;
	padding: 13px 25px !important;
}

/*// */
.become-a-cp-member {
	margin: 0px;
	padding: 80px 0;
	float: left;
	width: 100%;
	background: #f6f7fb;
	text-align: center;
	/* border-bottom: solid 1px #b9babd; */
}

.become-a-cp-member h2 {
	margin: 0 0 20px 0;
	padding: 0px;
	font-size: 28px;
	font-weight: bolder;
	color: #e82629;
}

.become-a-cp-member p {
	font-size: 17px;
	font-weight: 400;
	color: #000;
	text-align: center;
	margin: 0 0 30px 0;
}

.become-a-cp-member hr {
	width: 250px;
	margin: 0 auto;
	display: table;
	border-color: #e82629;
}

.become-a-cp-member p span {
	display: block;
}

/*//*/
.cp-homeowners {
	margin: 0px;
	padding: 30px 0;
	float: left;
	width: 100%;
	background: #f6f7fb;
}

.cp-homeowners .cp-row-card {
	width: 100%;
	float: left;
	margin-bottom: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 7%;
	box-sizing: border-box;
}

@media (max-width: 1050px) {
	.cp-homeowners .cp-row-card {
		flex-direction: column;
		text-align: center;
		padding: 0px;
	}
}


.cp-homeowners .cp-row-card img {
	max-width: 100%;
	float: left;
	margin-right: 30px;
}

@media (max-width: 1050px) {
	.cp-homeowners .cp-row-card img {
		margin-right: 0px;
		margin-bottom: 30px;
	}
}

.cp-homeowners .cp-row-card:nth-child(2) img {
	float: right;
	margin-left: 30px;
}

@media (max-width: 1050px) {
	.cp-homeowners .cp-row-card:nth-child(2) img {
		order: 1;
	}
}

@media (max-width: 1050px) {
	.cp-homeowners .cp-row-card:nth-child(2) .cp-row-body {
		order: 2;
	}
}

.cp-homeowners .cp-row-card .cp-row-body {
	overflow: hidden;
}


.cp-homeowners .cp-row-card .cp-row-body h3 {
	margin: 0 0 20px 0;
	padding: 0px;
	font-size: 28px;
	font-weight: bolder;
	color: #000;
}

.cp-homeowners .cp-row-card .cp-row-body p {
	font-size: 16px;
	font-weight: 400;
	color: #000;
	margin: 0 0 30px 0;
}

/*//*/
.cp-happy-customer {
	margin: 0px;
	padding: 80px 12%;
	float: left;
	width: 100%;
	background: url('/assets/images/testimonial-bg.png') no-repeat 100% 100% fixed;
	background-size: cover;
}

@media (max-width: 1050px) {
	.cp-happy-customer {
		padding: 40px 1%;
	}
}

@media (max-width: 640px) {
	.cp-happy-customer {
		padding: 20px 1% 30px 1%;
	}
}

.cp-happy-customer .hp-heading-3 {
	color: #fff !important;
	text-align: center;
	margin-bottom: 50px;
}

.cp-happy-customer .testimonials-cp {
	margin: 0px;
	padding: 0px;
	float: left;
	width: 100%;
}


.cp-happy-customer .testimonials-cp .testimonials-cp-row {
	display: block;
	position: relative;
}

.cp-happy-customer .testimonials-cp .testimonials-cp-row .img-placeholder {
	background: url('/assets/images/testimonial-user-bg.png') no-repeat top center;
	background-size: cover;
	width: 350px;
	float: left;
	height: 303px;
	margin-right: 30px;
}

@media (max-width: 1050px) {
	.cp-happy-customer .testimonials-cp .testimonials-cp-row .img-placeholder {
		background-size: contain;
		width: 280px;
	}
}

@media (max-width: 767px) {
	.cp-happy-customer .testimonials-cp .testimonials-cp-row .img-placeholder {
		display: table;
		margin: 0 auto;
		float: none;
		background-size: contain;
	}
}

@media (max-width: 640px) {
	.cp-happy-customer .testimonials-cp .testimonials-cp-row .img-placeholder {
		width: 256px;
		height: auto;
		margin-bottom: 20px;
	}
}

.cp-happy-customer .testimonials-cp .testimonials-cp-row .img-placeholder img {
	max-width: 100%;
	width: 250px;
	object-fit: cover;
	border-radius: 100%;
	margin: 0 auto;
	display: table;
	-webkit-box-shadow: 0px 5px 12px -2px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0px 5px 12px -2px rgba(0, 0, 0, 0.75);
	box-shadow: 0px 5px 12px -2px rgba(0, 0, 0, 0.75);
}

@media (max-width: 1050px) {
	.cp-happy-customer .testimonials-cp .testimonials-cp-row .img-placeholder img {
		width: 200px;
	}
}

@media (max-width: 640px) {
	.cp-happy-customer .testimonials-cp .testimonials-cp-row .img-placeholder img {
		width: 180px;
	}
}

.cp-happy-customer .testimonials-cp .testimonials-cp-row .testimonials-text {
	display: flex;
	color: #fff;
	justify-content: center;
	align-self: center;
	flex-direction: column;
	min-height: 300px;
}

@media (max-width: 1050px) {
	.cp-happy-customer .testimonials-cp .testimonials-cp-row .testimonials-text {
		min-height: auto;
	}
}


.cp-happy-customer .testimonials-cp .testimonials-cp-row .testimonials-text p {
	font-size: 16px;
	font-weight: 300;
	margin: 0 0 30px 0;
}

.cp-happy-customer .testimonials-cp .testimonials-cp-row .testimonials-text h5 {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 10x 0;
	padding: 0px;
}

.cp-happy-customer .testimonials-cp .testimonials-cp-row .testimonials-text h5 span {
	display: block;
	font-size: 14px;
	font-weight: 300;
	margin-top: 10px;
}

.slick-dots li {
	margin: 0px !important;
}

.slick-dots li button::before {
	color: rgb(255, 255, 255) !important;
	font-size: 12px !important;
}

.slick-dots li button:hover:before {
	color: rgb(255, 255, 255) !important;
}

.slick-dots li.slick-active button:before {
	opacity: .75;
	color: #ffff !important;
}


.cp-red {
	color: #e82629;
	;
}

.cp-red-btn-gr {
	background: rgb(229, 40, 40);
	background: -moz-linear-gradient(184deg, #e52828 0%, #be1f1f 100%);
	background: -webkit-linear-gradient(184deg, #e52828 0%, #be1f1f 100%);
	background: linear-gradient(184deg, #e52828 0%, #be1f1f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e52828", endColorstr="#be1f1f", GradientType=1);
	color: #fff;
	font-size: 14px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	white-space: initial;
}

.cp-red-btn-gr:hover,
.cp-red-btn-gr:focus {
	background: rgb(190, 31, 31);
	background: -moz-linear-gradient(184deg, rgba(190, 31, 31, 1) 0%, rgba(229, 40, 40, 1) 100%);
	background: -webkit-linear-gradient(184deg, rgba(190, 31, 31, 1) 0%, rgba(229, 40, 40, 1) 100%);
	background: linear-gradient(184deg, rgba(190, 31, 31, 1) 0%, rgba(229, 40, 40, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#be1f1f", endColorstr="#e52828", GradientType=1);
}


.cp-connect-consumers {
	background: #f6f7fb;
	padding: 80px;
	text-align: center;
	float: left;
	width: 100%;
}

@media (max-width: 1050px) {
	.cp-connect-consumers {
		padding: 40px;
	}
}

@media (max-width: 640px) {
	.cp-connect-consumers {
		padding: 15px;
	}
}

.cp-connect-consumers .hp-heading-3 {
	color: #000;
}

.cp-how-it-works {
	margin: 0px;
	padding: 80px 0;
	float: left;
	width: 100%;
	background: #eff0f1;
}

.cp-how-it-works .hp-heading-3 {
	color: #e82629;
	text-align: center;
}

@media (max-width: 1050px) {
	.cp-how-it-works .hp-heading-3 {
		margin-bottom: 30px;
		padding: 15px;
	}

}

.cp-how-it-works .hp-heading-3 span {
	position: relative;
	padding-bottom: 30px;
}

.cp-how-it-works .hp-heading-3 span::after {
	content: '';
	background: #e82629;
	width: 125px;
	height: 1px;
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.cp-how-it-works .cp-row-card {
	width: 100%;
	float: left;
	margin-bottom: 50px;
	display: flex;
	align-items: center;
	justify-content: center;

}

@media (max-width: 1050px) {
	.cp-how-it-works .cp-row-card {
		flex-direction: column;
		margin-bottom: 0px;
		padding-top: 50px;
	}
}

.cp-how-it-works .cp-row-card img {
	max-width: 100%;
	float: left;
	margin-right: 30px;
}

@media (max-width: 1050px) {
	.cp-how-it-works .cp-row-card img {
		margin-right: 0px !important;
	}
}

.cp-how-it-works .cp-row-card:last-child img {
	float: right;
	margin-left: 30px;
}

.cp-how-it-works .cp-row-card .cp-row-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cp-how-it-works .cp-row-card .cp-row-body h4 {
	font-weight: 600;
	font-size: 20px;
	margin: 0 0 20px 0;
	padding: 0px;
}

@media (max-width: 1050px) {
	.cp-how-it-works .cp-row-card .cp-row-body h4 {
		margin: 20px 0;
	}
}


.cp-how-it-works .cp-row-card .cp-row-body ul {
	margin: 0px;
	padding: 0px;
	border-left: solid 1px #e82629;
}

.cp-how-it-works .cp-row-card .cp-row-body ul li {
	display: block;
	width: 100%;
	font-size: 30px;
	color: #e82629;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: baseline;
	padding: 0 0px 0 22px;
	line-height: 1;
}

.cp-how-it-works .cp-row-card .cp-row-body ul li::before {
	width: 15px;
	height: 15px;
	border-radius: 50px;
	content: '';
	background: #e82629;
	position: absolute;
	left: -8px;
	top: 0px;
}

.cp-how-it-works .cp-row-card .cp-row-body ul li span {
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	color: #000;
	margin: 0 0 30px 0;
}

.cp-how-it-works .cp-row-card .cp-row-body ul li:last-child span {
	margin: 0px !important;
}

.p-0 {
	padding: 0px !important;
}

.cp-connect-consumers .btn {
	padding: 15px 50px !important;
	margin-top: 20px !important;
}

.hp-heading-3 {
	margin: 0 0 20px 0;
	padding: 0px;
	font-size: 32px;
	font-weight: bolder;
	color: #000;
}



/* Directory page CSS Start */





body {
	background-color: #f1f5f9 !important;
}


h3._total,
.total-column span {
	font-family: 'Roboto', sans-serif !important;
	text-transform: uppercase;
	font-weight: 500;
}

h3._total {
	color: #27303f;
	font-size: 2.5rem !important;
}

.content {
	padding: 2rem !important;
}

/* .panel_s{
	box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)!important;
} */

.panel_s .panel-body {
	background: #fff !important;
	padding: 1.5rem !important;
	border-radius: .25rem !important;
	border: transparent !important;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
}

#estimates_total .total-column .panel_s {
	box-shadow: none !important;
}

#estimates_total .total-column .panel_s .panel-body {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
	position: relative;
	overflow: hidden;
	border-radius: .25rem !important;
}

#estimates_total .total-column .panel_s .panel-body::after {
	content: '';
	width: 40px;
	height: 40px;
	position: absolute;
	bottom: 17px;
	right: 5px;
	opacity: 0.1;
	font-family: FontAwesome;
	display: inline-block;
	font-size: 60px;
	;
}

#estimates_total .total-column:nth-child(2) .panel_s .panel-body::after {
	content: "\f003";
	color: #727b86 !important;
}

#estimates_total .total-column:nth-child(3) .panel_s .panel-body::after {
	content: "\f1d9";
	color: #03a9f4 !important;
}

#estimates_total .total-column:nth-child(4) .panel_s .panel-body::after {
	content: "\f273";
	color: #ff6f00 !important;
}

#estimates_total .total-column:nth-child(5) .panel_s .panel-body::after {
	content: "\f05c";
	color: #fc2d42 !important;
}

#estimates_total .total-column:nth-child(6) .panel_s .panel-body::after {
	content: "\f046";
	color: #84c529 !important;
}

#estimates_total .total-column:nth-child(2) .panel_s .panel-body {
	border-left: 4px solid #727b86 !important;
}

#estimates_total .total-column:nth-child(3) .panel_s .panel-body {
	border-left: 4px solid #03a9f4 !important;
}

#estimates_total .total-column:nth-child(4) .panel_s .panel-body {
	border-left: 4px solid #ff6f00 !important;
}

#estimates_total .total-column:nth-child(5) .panel_s .panel-body {
	border-left: 4px solid #fc2d42 !important;
}

#estimates_total .total-column:nth-child(6) .panel_s .panel-body {
	border-left: 4px solid #84c529 !important;
}

#stats-top hr {
	display: none !important;
}


.box-shadow-none {
	box-shadow: none;
}

/* quick-stats-row */

.quick-stats-row {
	width: 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}


.quick-stats-row .quick-stats-card {

	background: #ffff;
	width: calc(100% * (1/4) - 30px);
	margin: 0px 30px 20px 0px;
	vertical-align: top;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
	padding: 20px 20px 10px !important;
	overflow: hidden;
}


.quick-stats-row .quick-stats-card::after {
	content: '';
	position: absolute;
	top: -3px;
	right: -13px;
	opacity: 0.1;
	font-family: FontAwesome;
	display: inline-block;
	font-size: 60px;
	;
}

.quick-stats-row .quick-stats-card:nth-child(1)::after {
	content: "\f003";
	color: #727b86 !important;
}

.quick-stats-row .quick-stats-card:nth-child(2)::after {
	content: "\f1d9";
	color: #03a9f4 !important;
}

.quick-stats-row .quick-stats-card:nth-child(3)::after {
	content: "\f273";
	color: #ff6f00 !important;
}

.quick-stats-row .quick-stats-card:nth-child(4)::after {
	content: "\f05c";
	color: #fc2d42 !important;
}

.quick-stats-row .quick-stats-card:nth-child(5)::after {
	content: "\f046";
	color: #84c529 !important;
}
/*
.quick-stats-row .quick-stats-card:nth-child(1) {
	border-left: 4px solid #727b86 !important;
}

.quick-stats-row .quick-stats-card:nth-child(2) {
	border-left: 4px solid #03a9f4 !important;
}

.quick-stats-row .quick-stats-card:nth-child(3) {
	border-left: 4px solid #ff6f00 !important;
}

.quick-stats-row .quick-stats-card:nth-child(4) {
	border-left: 4px solid #fc2d42 !important;
}

.quick-stats-row .quick-stats-card:nth-child(5) {
	border-left: 4px solid #84c529 !important;
} */

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

.quick-stats-card .quick-stats-header .quick-stats-title {
	display: flex;
	flex-direction: column;
	color: #64748b;
	letter-spacing: .05em !important;
	font-size: 1.6125rem !important;
	letter-spacing: .05em !important;
	text-transform: uppercase;
	font-weight: 700 !important;
	margin: 0 0 5px 0px;
}

.quick-stats-card .quick-stats-body {
	display: block;
}

.quick-stats-card .quick-stats-body h4 {
	font-size: 2.25rem !important;
	font-weight: 700 !important;
}


.quick-stats-card .quick-stats-body span {
	padding: 0 16px;
	text-align: right;
	white-space: nowrap;
	font-weight: 500 !important;
	color: #97a6ba;
	font-size: 1.11rem !important;
	float: right;
}

/* #DataTables_Table_0_length .input-sm{
	padding:10px 5px;
	width: 70px;
}
#DataTables_Table_0_wrapper .row:nth-child(2) .btn.btn-default.buttons-collection.btn-default-dt-options, #DataTables_Table_0_wrapper .row:nth-child(2) .btn.btn-default.btn-default-dt-options.btn-dt-reload{
	font-size:14px;
	padding:10px 15px;
}
.new-estimate-btn, .switch-pipeline{
	padding:10px;
}
.new-estimate-btn:hover{
	border-color: #9b1c1c!important;
}
#DataTables_Table_0_filter .input-group-addon{
	padding: 14px;
}
#DataTables_Table_0_filter .form-control{
	padding: 12px;
    height: auto;
}
.label-default, .label-info{
	transition: all ease-in-out 0.25s;
}
#DataTables_Table_0 .label-default:hover{
	background-color: #777;
	color:#fff;
}
#DataTables_Table_0 .label-info:hover{
	background-color: #5bc0de;
	color:#fff;
} */

.dataTables_info {
	color: #5850ec !important;
	font-size: 14px !important;
	font-weight: 500 !important;
}

/* container-header */
.container-header {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 3rem 0 3rem 0;
}

.container-header h2 {
	font-size: 32px;
	letter-spacing: -.022em;
	line-height: 1.25;
	color: #27303f;
	margin: 0px;
}

.container-header span {
	color: #64748b !important;
	font-size: 16px !important;
	font-weight: 400 !important;
}

.btn-outline-self {
	border: solid 1px #cfd8e3;
	padding: 0 15px;
	border-radius: 4px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 40px;
	min-height: 40px;
	max-height: 40px;
	box-sizing: border-box;
	position: relative;
	white-space: nowrap;
	vertical-align: baseline;
	text-align: center;
	background: transparent;
	margin-left: .5rem !important;
	color: #27303f;
	font-weight: 500;
	font-size: 13px !important;
	line-height: 40px;

}

.btn-outline-self:hover,
.btn-outline-self:focus {
	background: #cfd8e3;
}

.text-white {
	color: #fff !important;
}

.btn-red {
	background: #c81e1e !important;
	border: solid 1px #c81e1e;
	padding: 0 15px;
	border-radius: 4px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 40px;
	min-height: 40px;
	max-height: 40px;
	box-sizing: border-box;
	position: relative;
	white-space: nowrap;
	vertical-align: baseline;
	text-align: center;
	background: transparent;
	margin-left: .5rem !important;
	color: #f0f5ff;
	font-weight: 500;
	font-size: 13px !important;
	line-height: 40px;
}

.btn-black {
	background: #27303f !important;
	border: solid 1px #27303f;
	padding: 0 15px;
	border-radius: 4px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 40px;
	min-height: 40px;
	max-height: 40px;
	box-sizing: border-box;
	position: relative;
	white-space: nowrap;
	vertical-align: baseline;
	text-align: center;
	background: transparent;
	margin-left: .5rem !important;
	color: #fbfdfe;
	font-weight: 500;
	font-size: 13px !important;
	line-height: 40px;
}

.btn-red:hover,
.btn-red:focus {
	color: #fbfdfe !important;
	background: rgba(200, 30, 30, 0.88) !important;
}

.btn-black:hover,
.btn-black:focus {
	color: #fbfdfe !important;
	background: rgba(39, 48, 63, 0.85) !important;
}

.btn-red i,
.btn-black i {
	margin-right: 8px;
	line-height: 28px;
	height: 23px;
	font-size: 10px;
	font-weight: 400;
}

table.dataTable tbody tr td,
table.dataTable tbody tr th {
	vertical-align: middle;
	color: #27303f !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
}

td.sorting_2,
td.sorting_2 a {
	color: #64748b !important;
}

table.dataTable thead>tr>th {
	height: 45px !important;
	color: #27303f !important;
	font-weight: 500 !important;
	font-size: 13.5px !important;
}

.table .label-default {
	background: #fbd5d5 !important;
	color: #771d1d !important;
	border: 1px solid #fbd5d5;
	border-radius: 40px;
	font-size: 10px !important;
	padding: .22rem 1.55rem !important;
	line-height: 15px;
	font-weight: 700 !important;
}

.table .label-default::before {
	content: '';
	width: 7px !important;
	height: 7px !important;
	border-radius: 100%;
	background-color: #f05252 !important;
	margin-right: .5rem !important;
	display: inline-block !important;
}

.table .label-info {
	background: #bcf0da !important;
	border: 1px solid #bcf0da;
	color: #014737 !important;
	border-radius: 40px;
	font-size: 10px !important;
	padding: .22rem 1.55rem !important;
	line-height: 15px;
	font-weight: 700 !important;
}

.table .label-info::before {
	content: '';
	width: 7px !important;
	height: 7px !important;
	border-radius: 100%;
	background-color: #0e9f6e !important;
	margin-right: .5rem !important;
	display: inline-block !important;
}

.table .label-success {
	background: #5cb85c !important;
	border: 1px solid #5cb85c;
	color: #014737 !important;
	border-radius: 40px;
	font-size: 10px !important;
	padding: .22rem 1.55rem !important;
	line-height: 15px;
	font-weight: 700 !important;
}

.table .label-success::before {
	content: '';
	width: 7px !important;
	height: 7px !important;
	border-radius: 100%;
	background-color: #014737 !important;
	margin-right: .5rem !important;
	display: inline-block !important;
}


textarea.form-control,
select.form-control,
.dataTables_length select,
input[type="text"],
input[type="file"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input,
input[type="color"] {
	border: 1px solid #cfd8e3 !important;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05) !important;
	min-height: 48px !important;
}

textarea.form-control:focus,
select.form-control:focus,
.dataTables_length select:focus,
input[type="text"]:focus,
input[type="file"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus,
input[type="color"]:focus {
	border: 1px solid #5850ec !important;
	box-shadow: none !important;
	outline: 0 none !important;
}


.form-control:focus {
	border: 1px solid #5850ec !important;
	box-shadow: none !important;
	outline: 0 none !important;
}

.input-group-addon {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05) !important;
	min-height: 48px !important;
	background-color: transparent;
}

.input-group-addon:focus {
	border: 1px solid #5850ec !important;
	box-shadow: none !important;
	outline: 0 none !important;
}

.input-group-addon .fa {
	color: #64748b !important;
	font-weight: 500 !important;
}

.bootstrap-select .btn-default {
	border: 1px solid #cfd8e3 !important;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05) !important;
	min-height: 48px !important;
	padding: 0px 10px !important;
	height: unset !important;
}

.bootstrap-select .btn-default:focus {
	border: 1px solid #5850ec !important;
	box-shadow: none !important;
	outline: 0 none !important;
}


label {
	color: #27303f !important;
	transition: none;
	font-weight: 500 !important;
	font-size: 16px !important;
}

.radio label::before {
	width: 20px !important;
	height: 20px !important;
	border: 2px solid #64748b !important;
}

.radio label::after {
	width: 10px !important;
	height: 10px !important;
	left: 5px !important;
	top: 5px !important;
}

.radio-primary input[type="radio"]+label::after {
	background-color: #5850ec !important;
	border: 2px solid #5850ec !important;
	border-color: #5850ec !important;
}

.radio-primary input[type="radio"]:checked+label::after {
	background-color: #5850ec !important;
	border: 2px solid #5850ec !important;
	border-color: #5850ec !important;
}

.checkbox label::before {
	width: 20px !important;
	height: 20px !important;
	border: 2px solid #64748b !important;
}

.checkbox label::after {
	left: 1px;
	top: 2px;
}

.checkbox-danger input[type="checkbox"]:checked+label::before,
.checkbox-danger input[type="radio"]:checked+label::before {
	background-color: #5850ec !important;
	border-color: #5850ec !important;
	border: 2px solid #5850ec !important;
}

input[type="radio"]:focus,
input[type="checkbox"]:focus {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
	border: none !important;
}

.bold {
	color: #27303f !important;
	transition: none;
	font-weight: 500 !important;
	font-size: 16px !important;
}

.edit_shipping_billing_info {
	color: #27303f !important;
	transition: none;
	font-weight: 500 !important;
	font-size: 16px !important;
}

address {
	color: #27303f !important;
	transition: none;
	font-weight: 500 !important;
	font-size: 16px !important;
}

.estimate-items-table textarea,
.invoice-items-table textarea {
	height: 48px;
}

.btn-bottom-toolbar {
	left: 0px;
	margin: 0px !important;
	padding: 12px 27px 12px 0 !important;
	width: 100% !important;
}

.btn-bottom-toolbar .btn {
	padding: 5px 7px;
	font-size: 12px !important;
}

.btn-bottom-pusher {
	margin: 0px !important;
}

.todo-description {
	color: #27303f !important;
	font-weight: 500 !important;
	font-size: 16px;
	padding: 5px 10px 0 10px !important;
}

.todo-date {
	color: #27303f !important;
	font-weight: 500 !important;
	padding: 0 0 10px 9px !important;
}

.todo-description+a .fa {
	color: #27303f !important;
	font-weight: 500 !important;
	font-size: 16px !important;
}

.dataTables_length select,
.dataTables_filter input[type="search"] {
	min-height: 38px !important;
}

.dt-page-jump select {
	min-height: 35px !important;
	margin-top: 0px !important;
}

.pagination>li>a,
.pagination>li>span {
	padding: 7px 12px !important;
}

/* offcanvas-right-side */
.offcanvas-right-side {
	background: #fff;
	-webkit-box-shadow: 0 1px 9px -3px rgba(0, 0, 0, .25);
	box-shadow: 0 1px 9px -3px rgba(0, 0, 0, .25);
	z-index: 9999;
	position: fixed;
	height: 100vh;
	top: 0px;
	right: -375px;
	width: 375px;
	-webkit-transition: left .3s ease, right .3s ease, bottom .3s ease, top .3s ease;
	transition: left .3s ease, right .3s ease, bottom .3s ease, top .3s ease;
	padding: 2.5rem;
	box-sizing: border-box;
}


.offcanvas-right-side.active {
	right: 0px !important;
	-webkit-transition: left .3s ease, right .3s ease, bottom .3s ease, top .3s ease;
	transition: left .3s ease, right .3s ease, bottom .3s ease, top .3s ease;
}

.offcanvas-overlay {
	background: rgba(0, 0, 0, .1);
	position: fixed;
	width: 100vw;
	height: 100vh;
	display: none;
	z-index: 999;
	top: 0px;
	left: 0px;
	-webkit-animation: animation-offcanvas-fade-in .6s ease 1;
	animation: animation-offcanvas-fade-in .6s ease 1;
}

.offcanvas-overlay.active {
	display: block !important;
}


.top-bar-avtar {
	display: flex;
	width: auto;
	align-items: center;
	padding: 0 15px;
	cursor: pointer;
	position: relative;
	top: -5px;
}

.top-bar-avtar-details {
	display: flex;
	flex-direction: column;
	padding-right: .75rem;
	text-align: right;
}

.top-bar-avtar-details span {
	color: #b5b5c3;
	font-weight: 500;
	font-size: 13px;
}

.top-bar-avtar-details span:last-child {
	color: #3f4254;
	font-weight: 700;
}

.top-bar-avta-symbol {
	display: inline-block;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	position: relative;
	border-radius: .42rem;
	width: 35px;
	height: 35px;
	background-color: #eee5ff;
	color: #8950fc;
	font-size: 16px;
	line-height: 35px;
	text-align: center;
	margin: 0 auto;
	font-weight: 500;
}

.close-btn-offcanvas {
	height: 24px;
	width: 24px;
	color: #7e8299;
	background-color: #f3f6f9;
	border-color: #f3f6f9;
	text-align: center;
	line-height: 24px;
}

.close-btn-offcanvas:hover,
.close-btn-offcanvas:focus {
	color: #fff;
	background-color: rgba(240, 82, 82, 0.9);
	border-color: rgba(240, 82, 82, 0.9);
}

.offcanvas-right-side-header {
	display: flex;
	width: 100%;
}

.offcanvas-right-side-header h3 {
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 24px;
	color: #3f4254;
	display: flex;
	justify-content: space-between;
	width: 100%;
	align-items: center;
	width: 100%;
}

.offcanvas-right-side-header .btn {
	line-height: 13px;
	text-align: center;
	font-size: 11px;
	font-weight: 300;
}

.avtar-profile-info {
	display: flex;
	width: 100%;
	align-items: center;
	border-bottom: 1px dashed #ebedf3;
	margin-bottom: 1.25rem;
	padding-bottom: 2.25rem;
}

.avtar-profile-image-holder {
	margin-right: .75rem;
	width: 100px;
	height: 100px;
	border-radius: .42rem;
	object-fit: cover;
	object-position: top;
	position: relative;
}

.avtar-profile-image-holder::after {
	content: '';
	position: absolute;
	display: block;
	width: 11px;
	height: 11px;
	right: -2px;
	top: -5px;
	background: #0e9f6e;
	border-radius: 20px;
	border: 2px solid #fff;
	z-index: 2;
}

.avtar-profile-image-holder img {
	max-width: 100%;
	border-radius: .42rem;
}

.avtar-profile-details-inner {
	display: flex;
	flex-direction: column;
}

.avtar-profile-details-inner h6,
.avtar-profile-details-inner span,
.avtar-profile-details-inner a {
	font-size: 16px;
}

.avtar-profile-details-inner h6 {
	color: #b5b5c3;
	margin: 4px 0;
	font-weight: 400;
}

.avtar-profile-details-inner span {
	color: #b5b5c3;
}

.avtar-profile-details-inner a {
	color: #3f4254;
	font-weight: 500;
}

.avtar-profile-details-inner a:hover {
	color: #771d1d;
}

.avtar-profile-details-inner .btn-outline-self {
	height: 35px;
	min-height: 35px;
	max-height: 35px;
	margin-top: 10px;
	width: 95px;
}

.offcanvas-item-list {
	margin: 0 0 30px 0;
	padding: 0px;
	width: 100%;
}

.offcanvas-item-list li {
	display: flex;
	width: 100%;
	padding: .75rem 0;
	align-items: center;
}

.offcanvas-item-list-text {
	display: flex;
	flex-direction: column;
	margin-left: .75rem !important;
}

.offcanvas-item-list-text a {
	font-weight: 500;
}

.offcanvas-item-list-text a:hover {
	color: #771d1d;
}

.icon-bar {
	width: 40px;
	height: 40px;
	border-radius: .42rem;
	background-color: #eee5ff;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
}

.offcanvas-item-list-text .label {
	padding: .15rem .75rem .28rem .75rem;
	border-radius: .42rem;
	font-size: 12px;
}

.offcanvas-item-list-text .label-danger {
	color: #f64e60;
	background-color: #ffe2e5;
}

.recent-notifications {
	width: 100%;
}

.recent-notifications h4 {
	margin-bottom: 1.25rem;
	font-size: 22px;
	color: #3f4254;
	display: block;
}

.alerts-box {
	display: flex;
	align-items: center;
	padding: 1.25rem;
	margin-bottom: 30px;
	border-radius: .42rem !important;
}

.alerts-box span {
	font-weight: 700;
}

.alerts-box i {
	margin-right: .75rem;
}

.alerts-box-item {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	margin-right: .5rem;
}

.alerts-box-item a {
	color: #3f4254 !important;
	font-size: 16px;
}

.alerts-box-item span {
	font-size: 12px;
	font-weight: 400;
}

.bg-light-warning {
	background-color: #fff4de !important;
}

.bg-light-success {
	background-color: #c9f7f5 !important;
}

.bg-light-danger {
	background-color: #ffe2e5 !important;
}

.bg-light-info {
	background-color: #eee5ff !important;
}

.text-info {
	color: #8950fc !important;
}

.text-danger {
	color: #f64e60 !important;
}

.text-success {
	color: #1bc5bd !important;
}

.text-warning {
	color: #ffa800 !important;
}

.offcanvas-right-side-body {
	height: calc(100vh - 100px);
	overflow: hidden;
	padding-right: 1.25rem;
	margin-right: -1.25rem;
}

.offcanvas-right-side-body:hover {
	overflow-y: scroll;
}

.offcanvas-right-side-body::-webkit-scrollbar {
	width: 4px;
	border-radius: .42rem !important;
	height: 150px;
	padding-right: 1.25rem;
	margin-right: -1.25rem;
}

.offcanvas-right-side-body::-webkit-scrollbar-track {
	background: #ffffff !important;
}

.offcanvas-right-side-body::-webkit-scrollbar-thumb {
	background: #f1f1f1 !important;
}

.offcanvas-right-side-body::-webkit-scrollbar-thumb:hover {
	background: #f3f3f3 !important;
}

/* Responsive */
@media (max-width: 991px) {
	.container-header {
		display: block;
		flex: none;
	}

	.container-button-row {
		margin-top: 10px;
	}

	.btn-outline-self {
		margin-bottom: 8px;
	}

	.quick-stats-row .quick-stats-card {
		width: calc(100% * (1/2) - 30px);
	}

}

@media (max-width: 767px) {
	.quick-stats-row .quick-stats-card {
		width: calc(100% * (1/1) - 0px);
		margin: 0px 0px 20px 0px;
	}

	.offcanvas-right-side {
		right: -300px;
		width: 300px;
	}
}

/* PAYMENT TABLE REFUND ACTION UI FIX - START */
table.table-payments .refund-block {
    display: inline-flex;
}
/* PAYMENT TABLE REFUND ACTION UI FIX - END */