.dc-spm-wrap{
  margin:1rem 0;
  padding:1rem;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  background:#fff;
}
.dc-spm-note{
  margin:0 0 .75rem;
  font-size:.95rem;
  line-height:1.45;
}
.dc-spm-status {
	margin-top: 12px;
	font-size: 14px;
	line-height: 18px;
	display: none;
}

.dc-spm-status:not(:empty) {
	display: block;
}

.dc-spm-status.is-error{color:#b42318;}
.dc-spm-status.is-success{color:#027a48;}
.dc-spm-status.is-info{color:#344054;}
.dc-spm-debug{
  padding:.75rem 1rem;
  border-radius:10px;
  background:#fff7ed;
  color:#9a3412;
  border:1px solid #fdba74;
}

.dc-spm-box {
	position: relative;
	border: 1px solid #e7e7e7;
	border-radius: 15px;
	padding: 15px;
	background: #fff;
}

.dc-spm-box__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.dc-spm-box__text {
	flex: 1 1 50%;
}

h3.dc-spm-box__title {
    font-size: 18px;
	line-height:21px;
    font-weight: 700;
    color: var(--e-global-color-1bb17cd);
	margin: 0;
}

.dc-spm-box__desc {
	margin: 0;
	font-size: 14px;
	line-height: 18px;
    color: var(--e-global-color-1bb17cd);
}

.dc-spm-box__action {
	position: relative;
	flex: 1 1 50%;
	min-width: 0;
	min-height: 56px;
	overflow: hidden;
}

.dc-spm-box__action > [data-dc-spm-button] {
	position: relative;
	z-index: 1;
	width: 100%;
}

.dc-spm-box.is-locked .dc-spm-box__action > [data-dc-spm-button] {
	opacity: 0.7;
	filter: saturate(0.65);
}

.dc-spm-box__overlay {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 18px;
	cursor: not-allowed;
	pointer-events: all;
}
.dc-spm-box__overlay span {
	font-weight: 600;
	font-size: 14px;
	line-height: 18px;
	color: #111;
}

.dc-spm-box.is-ready .dc-spm-box__overlay {
	display: none;
}

.dc-spm-status {
	margin-top: 12px;
	font-size: 14px;
	line-height: 18px;;
}

.dc-spm-status.is-error {
	color: #b42318;
}

.dc-spm-status.is-success {
	color: #067647;
}

.dc-spm-status.is-info {
	color: #344054;
}

@media (max-width: 1024px) {
	.dc-spm-box__content {
		flex-direction: column;
		align-items: stretch;
	}

	.dc-spm-box__text,
	.dc-spm-box__action {
		flex: 1 1 100%;
		width: 100%;
	}
}