/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-artcloud-blocks-artcloud-alert {
	border: 1px dotted #f00;
	position: relative;
	.alert-main-box {
		background: var(--wp--preset--color--white) 0% 0% no-repeat padding-box;
		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1607843137);
		border-radius: 3px;
		opacity: 1;
		max-width: 903px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		min-height: 72px;
		position: relative;

		.alert-main-icon {
			width: 72px;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 0;
			min-height: 72px;

			svg {
				width: 36px;
				height: 36px;
			}
		}
		.alert-main-content {
			flex: 1 1 auto;
			padding-left: 90px;

			padding-top: 10px;
				padding-bottom: 10px;
			 

			h5 {
				color: #000;
				font-size: 16px;
				font-weight: bold;
			}
			p {
				color: #000;
				font-size: 16px;
				line-height: normal;
			}
		}
		.alertClose {
			position: absolute;
			right: 10px;
			z-index: 1;
			font-family: cursive;
			cursor: pointer;
			top: 5px;
			height: 16px;
			width: 16px;
			font-size: 16px;
		} 
	} 
	@media only screen and (max-width: 600px) {
		.alert-main-content {
			padding-top: 10px;
			padding-bottom: 10px;
		}
	}
}