.s24-remark {
	--s24-remark-accent: #ea1717;

	position: relative;
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: flex-start;
	gap: 16px;
	margin: 20px 0;
	padding: 18px 20px;
	border-radius: 5px;
	box-sizing: border-box;
}

.s24-remark *,
.s24-remark *::before,
.s24-remark *::after {
	box-sizing: border-box;
}

.s24-remark__icon {
	float: none !important;
	flex: 0 0 32px;
	width: 32px;
	margin: 0;
	line-height: 0;
	background: none;
	box-shadow: none;
}

.s24-remark__svg {
	display: block;
	width: 32px;
	height: 32px;
}

.s24-remark__body {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	max-width: 100%;
}

.s24-remark__title {
	margin: 0 0 0.4em;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.3;
	color: var(--s24-remark-accent);
}

.s24-remark__content > :first-child {
	margin-top: 0;
}

.s24-remark__content > :last-child {
	margin-bottom: 0;
}

.s24-remark__content p {
	margin: 0.75em 0;
}

.s24-remark__content ul,
.s24-remark__content ol {
	display: block;
	margin: 0.75em 0;
	padding-left: 1.5em;
	list-style-position: outside;
}

.s24-remark__content ul {
	list-style: none;
	padding-left: 1.25em;
}

.s24-remark__content ol {
	list-style-type: decimal;
}

.s24-remark__content li {
	display: list-item;
	margin: 0.25em 0;
}

.s24-remark__content ul > li {
	position: relative;
}

.s24-remark__content ul > li::before {
	content: '';
	position: absolute;
	left: -1.05em;
	top: 0.55em;
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	background: var(--s24-remark-accent);
}

.s24-remark__content li > ul,
.s24-remark__content li > ol {
	margin: 0.35em 0 0.35em 0.25em;
}

.s24-remark__content ul ul {
	list-style: none;
}

.s24-remark__content ul ul > li::before {
	background: transparent;
	border: 2px solid var(--s24-remark-accent);
	width: 0.35em;
	height: 0.35em;
	top: 0.6em;
	left: -1em;
}

.s24-remark__content a {
	text-decoration: underline;
}

.s24-remark--tone-bold .s24-remark__content a {
	color: #ffffff;
}

/* Color backgrounds are injected from plugin settings (inline CSS). */

/* Bold tone */
.s24-remark--tone-bold {
	color: #ffffff;
}

.s24-remark--tone-bold .s24-remark__title {
	color: #ffffff;
}

.s24-remark--tone-bold .s24-remark__content,
.s24-remark--tone-bold .s24-remark__content p,
.s24-remark--tone-bold .s24-remark__content a {
	color: #ffffff;
}

.s24-remark--tone-bold .s24-remark__content ul > li::before,
.s24-remark--tone-bold .s24-remark__content ul ul > li::before {
	background: #ffffff;
	border-color: #ffffff;
}

.s24-remark--tone-bold .s24-remark__content a {
	text-decoration: underline;
}