dialog {
  display: block;
}
.button-modal {
  position: absolute;
  left: 25%;
  right: auto;
  top: 25%;
  width: 50%;
  margin: 0 auto;
  background: @white;
  border: unset;
  z-index: 667;
  padding: 2em;
}

.modal-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: @black;
  opacity: .6;
  z-index: 666;
}

.modal-close {
	display: block;
	position: absolute;
	text-indent: -9999px;
	right: 13px;
	top: 13px;
	width: 32px;
	height: 32px;
	transition: transform .25s ease-in-out;
    border: unset;
    background: unset;
	&::before, &::after {
		content: "";
		position: absolute;
		display: block;
		margin: auto;
		transform-origin: center;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 28px;
		height: 0;
		border-top: 2px solid @black;
	}
	&::before {
		transform: rotate(45deg);
	}
	&::after {
		transform: rotate(-45deg);
	}
}


#js-modal.rd-ambetter-content {
    color: @dark-grey;
    .js-modal-content {
    	background-color: unset;
    }
    .rd-t-23-slab,.rd-t-29-slab,.rd-t-32-slab,.rd-t-36-slab {
		color: @brand-color;
	}
    p {
    	a {
    		color: @brand-color;
    	}
    }
	.modal-close {
		&::before, &::after {
			border-color: @brand-color;
		}
	}
}

@media (max-width: 767px) {
    .button-modal {
        left: auto;
        right: auto;
        width: 100%;
    }
}

.modal-editmode.ambetter {
	p {
		a {
			color: @brand-color !important;
		}
	}
	.rd-t-23-slab,.rd-t-29-slab,.rd-t-32-slab,.rd-t-36-slab {
		color: @brand-color;
	}
}

/* Classic edit styles */
.cq-element-maincontentpar {
	.buttonmodal {
		border: 1px solid @light-grey;
		background-color: @white;
		padding: 20px;
		margin: 20px;
	}
}

.buttonmodal.cq-Editable-dom {
	border: 1px solid @light-grey;
	background-color: @white;
	padding: 20px;
	margin: 20px;
}

/* Touch edit styles*/
.aem-AuthorLayer-Preview {
	.buttonmodal.cq-Editable-dom {
		border: unset;
		background-color: unset;
		padding: unset;
		margin: unset;
	}
}