.pusha-card {
	background: #fff;
	border-radius: 16px;
	padding: 28px 28px 28px 28px;
	margin-top: 10px;
	position: relative;
	border: 1px solid var(--pusha-border);
	box-shadow: var(--pusha-shadow);
}

.pusha-appointment-card-title,
.pusha-service-card-title,
.pusha-provider-card-title,
.pusha-client-card-title,
.pusha-location-card-title,
.pusha-category-card-title,
.pusha-extra-card-title {
	font-size: 16px;
	font-weight: 600;
}

.pusha-appointment-card-title,
.pusha-client-card-title,
.pusha-provider-card-title,
.pusha-service-card-title,
.pusha-extra-card-title {
	width: calc(100% - 50px);
	border-bottom: 1px solid var(--pusha-border);
	padding-bottom: 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.pusha-appointment-card-details {
	margin-left: auto;
    cursor: pointer;
    color: #e2e6ec !important;
    font-size: 23px !important;
}

.pusha-card-status {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	font-weight: 500;
	color: #257400;
	border: 1px solid var(--pusha-border);
	border-radius: 50px;
	height: 26px;
	padding: 0px 11px;
	margin-left: 10px;
}

.pusha-card-status.canceled,
.pusha-card-status.disabled {
	color: var(--pusha-app-canceled);
	border: 1px solid var(--pusha-app-canceled);
}

.pusha-card-status.pending,
.pusha-card-status.payment {
	color: var(--pusha-app-pending);
	border: 1px solid var(--pusha-app-pending);
}

.pusha-card-status.completed {
	color: var(--pusha-secondary);
	border: 1px solid var(--pusha-secondary);
}

.pusha-card-status.checked-in {
	color: var(--pusha-app-checked-in);
	border: 1px solid var(--pusha-app-checked-in);
}

.pusha-card-status.rejected {
	color: var(--pusha-text);
	border: 1px solid var(--pusha-text);
}

.pusha-card-circle-status {
	border-radius: 50%;
	border: 3px solid;
	width: 8px;
	height: 8px;
	margin-right: 6px;
}

.pusha-card-circle-status.canceled,
.pusha-card-circle-status.disabled {
	border-color: var(--pusha-app-canceled);
}

.pusha-card-circle-status.pending,
.pusha-card-circle-status.payment {
	border-color: var(--pusha-app-pending);
}

.pusha-card-circle-status.completed {
	border-color: var(--pusha-app-completed);
}

.pusha-card-circle-status.approved {
	border-color: var( --pusha-app-approved);
}

.pusha-card-circle-status.checked-in {
	border-color: var( --pusha-app-checked-in);
}

.pusha-card-circle-status.rejected {
	border-color: var(--pusha-text);
}

.pusha-appointment-card-service span {
	display: flex !important;
	align-items: center;
}

.pusha-appointment-card-provider,
.pusha-appointment-card-duration,
.pusha-service-card-duration,
.pusha-service-card-price,
.pusha-provider-card-email,
.pusha-provider-card-phone,
.pusha-client-card-email,
.pusha-client-card-phone,
.pusha-location-card-address,
.pusha-location-card-phone,
.pusha-category-card-count,
.pusha-extra-card-duration,
.pusha-extra-card-price {
	margin-top: 10px;
}

.pusha-appointment-card-item {
	line-height: 26px;
	font-size: 12px;
	margin-right: 80px;
	display: inline-block;
	color: var(--pusha-text);
}

.pusha-appointment-card-item:last-child {
	margin-right: 0px;
}

.pusha-appointment-card-item span {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--pusha-black);	
}

.pusha-appointment-card-status {
	display: inline-block;
	margin-right: 30px;
}

.pusha-appointment-card-status-wrap {
	display: flex;
	align-items: center;
	padding-bottom: 10px;
	border-bottom: 3px solid transparent;
}

/*
.pusha-appointment-card-status-wrap:before {
	content: "";
	margin-right: 8px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 3px solid #e0e3e2;
}
*/

.pusha-appointment-card-status input[value="completed"] + .pusha-appointment-card-status-wrap:before {
	border-color: var( --pusha-app-completed);
}

.pusha-appointment-card-status input[value="approved"] + .pusha-appointment-card-status-wrap:before {
	border-color: var( --pusha-app-approved);
}

.pusha-appointment-card-status input[value="pending"] + .pusha-appointment-card-status-wrap:before {
	border-color: var( --pusha-app-pending);
}

.pusha-appointment-card-status input[value="canceled"] + .pusha-appointment-card-status-wrap:before {
	border-color: var( --pusha-app-canceled);
}

.pusha-appointment-card-status input:checked + .pusha-appointment-card-status-wrap {
	border-bottom: 3px solid var(--pusha-primary);
}

.pusha-appointment-card-status input:checked + .pusha-appointment-card-status-wrap:before {
	border: 3px solid var(--pusha-primary);
}

.pusha-appointment-card-status span {
	margin-top: 6px;
	font-weight: 500;
	color: var(--pusha-text);
}

.pusha-card .row {
	display: flex;
	align-items: end;
}

.pusha-appointment-card-statuses {
	margin-top: 20px;
	border-bottom: 1px solid var(--pusha-border);
}

.pusha-card-delete {
    position: absolute;
    bottom: -20px;
    background: #fff;
    display: flex;
    left: 0;
    right: 0;
    align-items: center;
    margin: auto;
    justify-content: center;
    font-size: 16px;
    text-align: center;
    width: 40px;
    visibility: hidden;
    pointer-events: none;
    height: 40px;
    border: 1px solid #e3eaeb;
    border-radius: 50px;
    cursor: pointer;
    transform: scale(0.7);
    z-index: 9;
    transition: all 0.3s;
}

.pusha-card-delete:before,
.pusha-card-delete:after {
    content: "";
    width: 5px;
    position: absolute;
    height: 9px;
    background: white;
    left: -6px;
    display: none;
}

.pusha-card-delete:after {
    right: -6px;
    left: auto;
}

.pusha-card:hover .pusha-card-delete {
	transform: scale(1);
    visibility: visible;
    pointer-events: all;
}


.pusha-card-delete span {
	color: var(--pusha-black);
}

.pusha-card-delete:hover {
	background: var(--pusha-app-canceled);
}	

.pusha-card-delete:hover span {
	color: #fff;
}

.pusha-card-actions {
    width: 50px;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    bottom: 0;
    margin: auto;
    text-align: center;
    border-left: 1px solid var(--pusha-border);
}

.pusha-card-action {

}	

.pusha-card-action span {
    background: var(--pusha-bg);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 17px;
    display: flex;
    margin: 5px 0px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.pusha-card-action span:hover {
    background: #182142;
    color: #fff;
}

@media only screen and (min-width: 900px) {
	
}