.os-add-box {
	border: 1px dotted #aaa;
	padding: 11px 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	text-decoration: none;
	margin: 15px 0px;
	border-radius: $border-radius-lg;

	.add-box-graphic-w {
		width: 40px;
		height: 40px;
		position: relative;

		.add-box-plus {
			position: absolute;
			top: 50%;
			left: 50%;
			border-radius: 50%;
			height: 15px;
			width: 15px;
			background-color: $brand-primary;
			box-shadow: 0px 0px 0px 8px rgba(#ccc, 0.3);
			color: #fff;
			transform: translate(-50%, -50%);
			transition: all 0.2s cubic-bezier(0.25, 1.4, 0.5, 1.35);

			i {
				position: absolute;
				display: block;
				top: 50%;
				left: 50%;
				font-size: 7px;
				transform: translate(-45%, -47%);
				transition: all 0.2s ease;
			}
		}
	}

	.add-box-label {
		color: $headings-color;
		font-weight: $body-font-weight-bold;
		font-size: $body-font-size-s;
		transition: all 0.2s cubic-bezier(0.25, 1.4, 0.5, 1.35);
		margin-left: 15px;
	}

	&:hover {
		border-color: $brand-primary;
		border-style: solid;
		box-shadow: 0 0 0 1px $brand-primary;

		.add-box-plus {
			box-shadow: 0px 0px 0px 10px rgba(#bdd6fc, 0.3);
			transform: translate(-50%, -50%) scale(1.2);

			i {
			}
		}

		.add-box-label {
			transform: translateX(5px);
		}
	}

	&.os-loading {
		.add-box-plus {
			color: rgba(255, 255, 255, 0.4);

			&:after {
				@include loading-circle($brand-primary, 42px);
			}
		}

		animation: animate_appointment_small_box 0.8s ease infinite;
	}
}

.latepoint-content > .os-add-box:first-child {
	margin-top: 0px;
}

.lp-order-status {
	padding: 2px 5px;
	border-radius: $border-radius;
	background-color: #eee;
	color: #333;
	border: 1px solid #aaa;
	font-weight: $body-font-weight-bold;
	font-size: floor($font-size-base * 0.8);
	line-height: 1;
	&.lp-order-status {
		&-cancelled {
			background-color: #ffc3c3;
			border-color: #e62a31;
			color: #5d2222;
		}
		&-partially_paid,
		&-partially_fulfilled {
			background-color: #ffe1c3;
			border-color: #bd8841;
			color: #2e1e11;
		}
		&-completed,
		&-fully_paid,
		&-fulfilled {
			background-color: #cbfad7;
			border-color: #65bf99;
			color: #347159;
		}
		&-open {
			background-color: #d1e8ff;
			border-color: #2382ed;
			color: #0143a6;
		}
	}
}
.lp-transaction-status {
	padding: 2px 5px;
	border-radius: $border-radius;
	background-color: #eee;
	color: #333;
	border: 1px solid #aaa;
	font-weight: $body-font-weight-bold;
	font-size: floor($font-size-base * 0.8);
	line-height: 1;

	&.lp-transaction-status,
	&.lp-transaction-funds-status {
		&-declined,
		&-failed {
			background-color: #ffc3c3;
			border-color: #e62a31;
			color: #5d2222;
		}

		&-approved,
		&-succeeded {
			background-color: #cbfad7;
			border-color: #65bf99;
			color: #347159;
		}
		&-capture,
		&-sale {
			background-color: #cbfad7;
			border-color: #65bf99;
			color: #347159;
		}
		&-authorization {
			background-color: #d1e8ff;
			border-color: #2382ed;
			color: #0143a6;
		}
		&-void,
		&-refund {
			background-color: #ffc3c3;
			border-color: #e62a31;
			color: #5d2222;
		}
	}
}

.lp-processor-logo {
	&.lp-processor-logo-stripe_connect,
	&.lp-processor-logo-stripe {
		background-image: url(#{$images-path}/processor-stripe.png);
		background-size: contain;
		color: transparent;
		background-position: center center;
		background-repeat: no-repeat;
		width: 30px;
		overflow: hidden;
	}

	&.lp-processor-logo-razorpay_connect {
		background-image: url(#{$images-path}/processor-razorpay-logo.png);
		background-size: contain;
		color: transparent;
		background-position: center center;
		background-repeat: no-repeat;
		width: 60px;
		overflow: hidden;
	}

	&.lp-processor-logo-braintree {
		background-image: url(#{$images-path}/processor-braintree.png);
		background-size: contain;
		color: transparent;
		background-position: center center;
		background-repeat: no-repeat;
		width: 60px;
		overflow: hidden;
	}

	&.lp-processor-logo-paypal {
		background-image: url(#{$images-path}/processor-paypal-short.png);
		background-size: contain;
		color: transparent;
		background-position: center center;
		background-repeat: no-repeat;
		width: 60px;
		overflow: hidden;
	}
}

.copyable-text-block {
	position: relative;
	margin-top: 20px;

	.text-label {
		color: $color-faded;
		margin-bottom: 3px;
		font-weight: $body-font-weight-bold;
		font-size: $font-size-base;
	}

	.text-value {
		padding: 8px;
		border-radius: 6px;
		position: relative;
		font-size: floor($font-size-base * 1.1);
		font-weight: $body-font-weight-bold;
		cursor: pointer;
		width: 100%;
	}
}

.pe-conditions h3 {
	margin: 20px 0px 10px 0px;
}

.late-tooltip {
	max-width: 250px;
	text-align: center;
	position: absolute;
	background-color: #000;
	color: #fff;
	padding: 5px 6px 6px;
	line-height: 1.2;
	font-weight: $body-font-weight-bold;
	font-size: floor($font-size-base * 0.9);
	border-radius: $tooltip-border-radius;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.os-accordion-wrapper {
	border-top: 1px solid $border-color-light;
	& + .os-accordion-wrapper {
		border-top: none;
	}
	&.is-open {
		.os-accordion-content {
			display: block;
		}
	}
	.os-accordion-title {
		border-bottom: 1px solid $border-color-light;
		position: relative;
		padding: 15px 0px;
		cursor: pointer;
		display: flex;
		align-items: center;
		&:after {
			@include latepointfont_admin("\e911");
			position: absolute;
			top: 50%;
			right: 0;
			font-size: 14px;
			color: $color-faded;
			transform: translateY(-50%);
		}
		&:hover {
			&:after {
				color: $headings-color;
			}
			.latepoint-icon {
				color: $brand-primary;
			}
			h3 {
				color: $brand-primary;
			}
		}
		.latepoint-icon {
			margin-right: 10px;
			width: 20px;
			font-size: 16px;
			color: $headings-color;
		}
		h3 {
			font-size: 16px;
			margin: 0px;
			flex: 1;
		}
	}
	.os-accordion-content {
		display: none;
		padding: 20px 0px;
	}
}