.text-highlighter-element .item-title {
display: inline;
font-size: 3rem;
line-height: 1.80;
padding: 0.5rem 1rem;
margin-left: 5px;
}
.text-highlighter-element.is-ltr .item-title {
margin-left: 0;
margin-right: 5px;
}
.text-highlighter-element .item-title.with-highlight {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.text-highlighter-element .with-highlight:focus {
outline:0;
}
.text-highlighter-element .hl-content {
line-height: 3.8;
padding: 7px 3px;
}
.preset-highlighter-style1 {
background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 100%);
padding: 0.2em 0.5em;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
color: #fff;
font-weight: bold;
}
.preset-highlighter-style2 {
background: linear-gradient(180deg, transparent 60%, #a8e6cf 60%);
padding: 0.1em 0.3em;
font-weight: bold;
color: #333;
}
.preset-highlighter-style3 {
background: transparent;
color: #333;
padding: 0.2em 0.5em;
border: 2px solid #64b5f6;
border-radius: 50px;
display: inline-block;
transition: all 0.3s ease;
}
.preset-highlighter-style3:hover {
background: #64b5f6;
color: #fff;
transform: scale(1.05);
}
.preset-highlighter-style4 {
color: #fff;
background: #000;
padding: 0.2em 0.5em;
border-radius: 5px;
text-shadow: 0 0 5px #00fffc, 0 0 10px #00fffc, 0 0 20px #00fffc;
box-shadow: 0 0 5px #00fffc, 0 0 10px #00fffc, 0 0 20px #00fffc;
}
.preset-highlighter-style5 {
background: linear-gradient(135deg, #ff6f61, #ffcc00);
color: #fff;
font-weight: bold;
padding: 1.5rem 2rem;
border-radius: 15px;
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 30px rgba(255, 111, 97, 0.4), 0 0 20px rgba(255, 204, 0, 0.3) inset;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.preset-highlighter-style5:hover {
transform: scale(1.05);
box-shadow: 0 15px 40px rgba(255, 111, 97, 0.6), 0 0 30px rgba(255, 204, 0, 0.5) inset;
}