.os-payment-processor-w .os-payment-processor-body#togglePaymentSettings_stripe {
	padding: 0px;
}
.stripe-checkout-payments-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-row-gap: 4px;
	grid-column-gap: 20px;
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid $border-color-lightest;
}
.table-fields-selector-w {
	margin-top: 20px;
	h3 {
		margin-bottom: 15px;
		font-weight: $body-font-weight-bold;
		font-size: floor($font-size-base * 0.8);
		text-transform: uppercase;
		letter-spacing: 1.5px;
		color: $color-faded;
		display: flex;
		align-items: center;
		span {
			flex: 0;
			display: block;
			white-space: nowrap;
		}
		span + span {
			display: block;
			background-color: #eef1f9;
			flex: 1;
			height: 5px;
			margin-left: 10px;
		}
	}
	.table-fields-selector-column {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 10px;
		.os-form-group {
			border: 1px solid #d6dbe4;
			border-bottom-color: #c4c9d0;
			border-radius: 6px;
			padding: 8px;
			margin: 0px;
			box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
		}
		.os-form-group.os-form-toggler-group {
			label {
				font-size: floor($font-size-base * 0.95);
				margin-left: 0px;
				padding: 0px;
				padding-left: 8px;
				border-left: 1px solid $border-color-lightest;
			}
			.os-toggler-label-w {
				padding: 0px;
				margin-left: 8px;
			}
		}
		& + h3 {
			margin-top: 20px;
		}
	}
}

.os-column-order-w {
	padding: 0px;
	.os-column-order-hint {
		font-size: floor($font-size-base * 0.85);
		color: $color-faded;
		margin-bottom: 15px;
	}
}

.os-column-order-list {
	position: relative;
	border: 1px solid $border-color-lightest;
	border-radius: 8px;
	overflow: hidden;
}

.os-column-order-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	background-color: #fff;
	border-bottom: 1px solid $border-color-lightest;
	user-select: none;
	&:last-child {
		border-bottom: none;
	}
	&.gu-transit {
		opacity: 0.3;
	}
}

.os-column-order-drag {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	cursor: grab;
	color: $color-faded;
	flex-shrink: 0;
	&:hover {
		background-color: #eef1f9;
		color: $body-color;
	}
	i {
		font-size: 14px;
		pointer-events: none;
	}
}

.os-column-order-label {
	flex: 1;
	font-size: floor($font-size-base * 0.95);
	font-weight: $body-font-weight-bold;
	color: $body-color;
}

.os-column-order-toggle {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	.os-form-group.os-form-toggler-group {
		margin: 0;
		border: none;
		box-shadow: none;
		padding: 0;
		background: none;
		label {
			display: none;
		}
		.os-toggler-label-w {
			margin: 0;
			padding: 0;
		}
	}
}

.os-column-order-badge {
	font-size: floor($font-size-base * 0.78);
	color: $color-faded;
	background-color: #f0f2f5;
	padding: 2px 8px;
	border-radius: 4px;
	font-weight: $body-font-weight-normal;
	&.os-column-order-badge-auto {
		background-color: #eef4ff;
		color: #5b7dbb;
	}
}

// Dragula mirror style for dragged column item
.gu-mirror.os-column-order-item {
	box-shadow:
		0 8px 30px rgba(0, 0, 0, 0.12),
		0 2px 6px rgba(0, 0, 0, 0.08);
	border-radius: 6px;
	border: 1px solid $border-color-lightest;
	padding: 11px 14px;
	background-color: #fff;
	list-style-type: none;
	cursor: grabbing !important;
}

.os-togglable-items-w {
	margin-bottom: 40px;
	.os-togglable-item-w {
		background-color: #fff;
		@include white-box();
		margin-bottom: 15px;
		&.is-disabled {
			opacity: 0.5;
			.os-field-setting {
				display: none;
			}
		}
		.os-togglable-item-head {
			display: flex;
			align-items: center;
			padding: 15px 20px 15px 20px;
		}
		.os-togglable-item-body {
			padding: 0px;
			border-top: 1px solid $border-color-main;
			&:has(> :not(.sub-section-row)) {
				// hack to support addons that haven't migrated to sub-section-row layout
				padding: 20px;
			}
		}
		.os-togglable-item-logo-img {
			height: 25px;
			width: auto;
			display: block;
		}
		.os-toggler-w {
			padding: 10px 20px 10px 0px;
			margin-right: 20px;
			border-right: 1px solid $border-color-lightest;
			input[type="radio"] {
				display: none !important;
			}
		}
		.os-togglable-item-name {
			margin-right: auto;
			font-weight: $body-font-weight-bold;
			font-size: $body-font-size-m;
			padding: 8px 15px;
		}
		.os-toggler-w + .os-togglable-item-name {
			padding-left: 0px;
		}
		.os-togglable-item-logo-img + .os-togglable-item-name {
			margin-left: auto;
			margin-right: 0;
			color: $color-faded;
		}
	}
}

.os-payment-processors-w {
	margin-bottom: 40px;
}
.os-payment-processor-w {
	background-color: #fff;
	box-shadow: $box-shadow;
	border-radius: $border-radius;
	margin-bottom: 15px;
	.os-payment-processor-head {
		display: flex;
		align-items: center;
		padding: 15px;
	}
	.os-payment-processor-body {
		padding: 25px;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
	}
	.os-processor-logo-img {
		height: 30px;
		width: auto;
		display: block;
	}
	.os-processor-logo {
		height: 30px;
		width: 100px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left center;
	}
	.os-toggler-w {
		padding: 8px 15px 8px 5px;
		margin-right: 20px;
		border-right: 1px solid rgba(0, 0, 0, 0.1);
	}
	.os-processor-name {
		margin-right: auto;
		font-weight: $body-font-weight-bold;
		font-size: floor($font-size-base * 1.2);
		padding: 8px 15px;
	}
	.os-processor-logo + .os-processor-name {
		display: none;
	}
	&.is-disabled {
		opacity: 0.5;
		.os-field-setting {
			display: none;
		}
	}
}

.os-togglable-content {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.date-ranges-heading {
	font-size: floor($font-size-base * 1.1);
	margin-bottom: 15px;
	margin-top: 30px;
	font-weight: $body-font-weight-bold;
	color: $brand-primary;
	letter-spacing: 1px;
	background-color: #f1f5ff;
	display: inline-block;
	padding: 3px 5px;
	border-radius: 4px;
	text-transform: uppercase;
}

.installed-addons-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
}
.os-installed-addon-box {
	padding: 20px;
	@include white-box();
	border-radius: $border-radius;
	background-color: #fff;
	h4 {
		font-size: floor($headings-font-size * 0.65);
		margin: 0px;
		margin-bottom: 8px;
	}
}

.reset-db-version-link {
	margin-left: 5px;
	text-decoration: none;
	position: relative;
	.latepoint-icon {
		margin-right: 3px;
		font-size: 10px;
	}
	&.os-loading {
		.latepoint-icon {
			opacity: 0;
		}
		&:before {
			@include loading-circle($brand-primary, 10px);
			left: 5px;
		}
	}
}

.os-iab-version-info {
	color: $color-faded;
	font-size: floor($font-size-base * 0.7);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	strong {
		margin-left: 2px;
		color: $headings-color;
	}
	strong + span {
		margin-left: 5px;
		padding-left: 10px;
		border-left: 1px solid $border-color-lightest;
	}
	strong,
	span,
	a {
		display: inline-block;
	}
	.os-iab-update-available {
		background-color: #ffe8b1;
		color: #764219;
		margin-right: 5px;
		padding: 0px 3px;
		border-radius: 2px;
		font-weight: $body-font-weight-bold;
	}
}

.latepoint-system-status-w {
	ul {
		list-style: none;
		margin: 0px;
		padding: 0px;
		li {
			padding: 5px 0px;
			margin: 0px;
			&:last-child {
				border-bottom: none;
			}
		}
	}
}

.version-and-license-info-w {
	display: flex;
	gap: 30px;
	align-items: flex-start;
	> div {
		flex: 1;
	}
}

.os-notifications-control-bar {
	background-color: #fff;
	display: flex;
	padding: 10px 15px;
	border: 1px solid $border-color-light;
	border-bottom-color: $border-color-strong;
	margin-bottom: 20px;
	align-items: center;
	border-radius: 6px;
	box-shadow: 0px 2px 0px 0px $border-color-lightest;
	.control-bar-option {
		&:last-child {
			margin-left: 20px;
			padding-left: 20px;
			border-left: 1px solid $border-color-lightest;
		}
	}
	.os-form-group.os-form-group-transparent {
		margin-bottom: 0;
		display: flex;
		align-items: center;
		label {
			white-space: nowrap;
			margin-right: 10px;
			font-size: $font-size-base;
		}
	}
}

.os-section-collapsible-wrapper {
	.os-section-collapsible-trigger {
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1px solid $border-color-lightest;
		padding: 10px 10px 10px 0;
		h3 {
			margin: 0;
			margin-right: auto;
			font-size: floor($headings-font-size * 0.55);
		}
		.os-collapsible-icon {
			position: relative;
			&:before {
				content: "";
				width: 8px;
				height: 1px;
				background-color: #111;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
			&:after {
				content: "";
				width: 1px;
				height: 8px;
				background-color: #111;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
	.os-section-collapsible-inner {
		display: none;
		border-top: 1px solid $border-color-lightest;
	}
	&.is-open {
		.os-section-collapsible-inner {
			display: block;
		}
	}
}

.payment-processor-connect-status-wrapper {
	font-size: $font-size-base;

	.payment-processor-connect-status-inner {
		display: flex;
		align-items: center;
		gap: 20px;
	}
	.os-loading-spinner {
		position: relative;
		width: 28px;
		height: 28px;
		&:before {
			@include loading-circle($brand-primary, 20px);
		}
	}
	.payment-processor-disconnect-link,
	.payment-processor-refresh-link {
		display: flex;
		align-items: center;
		gap: 5px;
		text-decoration: none;
		color: #111;
		span {
			border-bottom: 1px dotted #111;
		}
		&:hover {
			span {
				border-bottom-style: solid;
			}
		}
	}
	.payment-processor-disconnect-link {
		color: #860707;
		position: relative;
		&:focus {
			outline: none;
			box-shadow: none;
		}
		span {
			border-bottom-color: #860707;
		}
		&.os-loading {
			color: transparent;
			span {
				border-bottom-color: transparent;
			}
			&:before {
				@include loading-circle(#860707, 20px);
			}
		}
	}

	.payment-processor-status-charges-disabled,
	.payment-processor-status-charges-enabled,
	.payment-processor-status-connected {
		background-color: #d6ffad;
		color: #2c420e;
		padding: 5px;
		padding-right: 10px;
		border-radius: $border-radius-sm;
		display: flex;
		align-items: center;
		gap: 5px;
		text-decoration: none;
	}
	.payment-processor-status-charges-disabled {
		background-color: #ffea9c;
		color: #2d251b;
	}
	.stripe-connect-account-info {
		margin-left: auto;
		padding: 5px;
		background-color: #eee;
		border-radius: $border-radius-sm;
		font-size: $body-font-size-xs;
		.payment-processor-disconnect-link {
			margin-top: 5px;
		}
	}
	.payment-start-connecting {
		display: flex;
		align-items: center;
		gap: 5px;
		text-decoration: none;
		color: $brand-primary;
		padding: 5px 0 4px;
		font-size: $font-size-base;
		position: relative;
		span {
			border-bottom: 1px dotted $brand-primary;
		}
		&:hover {
			span {
				border-bottom-style: solid;
			}
		}
		&:focus {
			box-shadow: none;
		}
		&.os-loading {
			color: transparent;
			span {
				border-bottom-color: transparent;
			}
			&:before {
				@include loading-circle($brand-primary, 20px);
			}
		}
	}
}

.get-pro-wrapper {
	padding: 30px;
	border: 1px solid #e4e5e7;
	border-radius: $border-radius;
	h4 {
		margin: 0;
		margin-bottom: 10px;
		font-size: $body-font-size-l;
		font-weight: $body-font-weight-black;
	}
	.pro-sub-heading {
		font-size: $body-font-size-m;
		color: $color-faded;
		margin-bottom: 15px;
	}
	.get-pro-wrapper-fields {
		display: flex;
		align-items: center;
		margin: 0;
		gap: 10px;
		.os-form-group {
			flex: 1;
			margin-bottom: 0;
		}
		button {
			flex: 0;
		}
	}
}

.os-premium-features-list {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr 1fr;
	.os-premium-feature {
		border-bottom: 1px solid #eee;
		padding-bottom: 20px;
		.feature-icon {
			font-size: 16px;
			margin-bottom: 5px;
			color: $brand-primary;
			text-shadow: 2px -2px 0px #fff;
		}
		.feature-heading {
			font-size: $body-font-size-m;
			font-weight: $body-font-weight-black;
			color: $headings-color;
			margin-bottom: 5px;
		}
		.feature-description {
			color: $color-faded;
			font-size: $body-font-size-xs;
		}
		& + .os-premium-feature {
		}
	}
}

body.latepoint-admin {
	.latepoint-lightbox-w {
		.upgrade-info-btn {
			display: flex;
			align-items: center;
			font-size: $body-font-size-l;
			font-weight: $body-font-weight-black;
			gap: 10px;
			justify-content: center;
			text-decoration: none;
			color: #fff;
			background-color: $brand-primary;
			cursor: pointer;
		}
	}
}

.latepoint-full-panel-w {
	.instant-booking-preview-and-settings {
		display: flex;
		flex: 1;
	}
	.instant-booking-settings-wrapper {
		flex: 0 0 250px;
		display: flex;
		flex-direction: column;
	}
	.instant-booking-preview-wrapper {
		flex: 1;
		display: flex;
		flex-direction: column;
		border-right: 1px solid $border-color-main;
	}
	.instant-preview-iframe {
		width: 100%;
		height: 100%;
	}

	.instant-booking-settings-iframe-wrapper {
		flex: 1;
	}
	.instant-booking-preview-heading {
		padding: 10px 20px;
		font-weight: $headings-font-weight-bold;
		font-size: $headings-font-size-m;
		border-bottom: 1px solid $border-color-main;
		display: flex;
		align-items: center;
		.latepoint-instant-preview-close-trigger {
			font-size: 18px;
			padding: 5px;
			background-color: #fff;
			border-radius: 6px;
			text-decoration: none;
			color: $headings-color;
			line-height: 1;
			cursor: pointer;
			&:hover {
				background-color: #eee;
			}
		}
		h2 {
			margin: 0;
			flex: 1;
			padding: 10px 0;
		}
	}
	.instant-booking-preview-settings-content {
		padding: 20px;
		flex: 1;
		overflow: auto;
	}
	.instant-booking-preview-settings-buttons {
		display: flex;
		gap: 10px;
		.latepoint-btn {
			display: flex;
			gap: 10px;
		}
	}
	.preview-settings-label {
		font-size: $body-font-size-m;
		margin-top: 20px;
		margin-bottom: 10px;
	}
	.preview-background-options {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 22px;
		.preview-background-option {
			height: 36px;
			border-radius: 6px;
			box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1);
			cursor: pointer;
			&:hover {
				box-shadow:
					0 0 0 2px #fff,
					0 0 0 4px $brand-primary;
			}
			&.selected {
				box-shadow:
					0 0 0 2px #fff,
					0 0 0 4px $brand-primary;
			}
		}
	}
}