.stc-tooltip,
.stc-tooltip-editable {
	position: relative;
	cursor: help;
}

.stc-tooltip-editable .stc-tooltip-box {
	position: absolute;
	visibility: hidden;
	z-index: -1;
}

.stc-tooltip-editable:hover .stc-tooltip-box {
	visibility: visible;
	z-index: 10;
}

.stc-tooltip:hover:after,
.stc-tooltip:active:after,
.stc-tooltip:focus:after {
	content: attr(data-title);
	position: absolute;
	min-width: 200px;
	padding: 10px;
	height: auto;
	max-width: 100%;
	background-color: var(--color-accent-pale);
	color: var(--color-black);
	font-size: 14px;
	border-radius: 5px;
	top: 20px;
	left: 0;
  right: 50%;
	z-index: 10;
	text-transform: none;
}

.stc-tooltip-editable:hover .stc-tooltip-box {
	content: attr(data-title);
	position: absolute;
	min-width: 300px;
	padding: 10px;
	height: auto;
	max-width: 100%;
	background-color: var(--color-accent-pale);
	color: var(--color-black);
	font-size: 14px;
	border-radius: 5px;
	top: 0px;
	left: 100%;
	/* transform: translateX(50%); */
	z-index: 10;
	text-transform: none;
}

/* @media screen and (max-width: 480px) {
    .stc-tooltip:hover:after,
.stc-tooltip:active:after,
.stc-tooltip:focus:after {
    left: 0;
    right: 0;
    top: 30px;
    min-width: 100px;
    overflow-wrap: break-word;
}
} */

/* display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font: var(--fa-font-solid);
    content: "\f05a"; */

.stc-summary__value.has-tooltip {
	position: relative;
}

.stc-summary__value.has-tooltip .stc-tooltip__external {
	position: relative;
}

.stc-summary__value.has-tooltip .stc-tooltip__external:after {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font: var(--fa-font-solid);
	content: "\f05a";
	margin-left: 4px;
	color: var(--color-primary);
}

.stc-summary__value.has-tooltip .stc-tooltip__external:hover:after,
.stc-summary__value.has-tooltip .stc-tooltip__external:hover:active,
.stc-summary__value.has-tooltip .stc-tooltip__external:hover:focus {
	color: var(--color-accent);
}

.stc-tooltip__external-content {
	background-color: var(--color-accent-pale);
	padding: 15px;
	border-radius: 5px;
	color: var(--color-black);
	position: absolute;
	z-index: 10;
	min-width: 200px;
	left: -60px;
	font-size: 14px;
	display: none;
}

.stc-tooltip__external-content ul {
	padding-left: 20px;
}

.stc-summary__value.has-tooltip:hover .stc-tooltip__external-content,
.stc-summary__value.has-tooltip:active .stc-tooltip__external-content,
.stc-summary__value.has-tooltip:focus .stc-tooltip__external-content {
	display: block;
}

.stc-tooltip i {
	font-size: 13px;
}

@media screen and (max-width: 767px) {
	.stc-tooltip:hover:after,
	.stc-tooltip:active:after,
	.stc-tooltip:focus:after {
		left: 0;
		/* right: 0; */
		top: 30px;
		/* min-width: 100px; */
		overflow-wrap: break-word;
	}

	.stc-tooltip-editable:hover .stc-tooltip-box {
		top: 30px;
		left: auto;
		min-width: 250px;
		/* transform: translateX(-50%); */
		z-index: 10;
		text-transform: none;
	}
}

@media screen and (max-width: 480px) {
	.stc-summary__value .stc-tooltip {
		position: static;
	}

	.stc-tooltip:hover:after,
	.stc-tooltip:active:after,
	.stc-tooltip:focus:after {
		top: 30px;
		min-width: unset;
		max-width: 175px;
	}
}
