/* Styles for range input */
input[type="range"] {
  --c: orange; /* active color */
  --g: 8px; /* the gap */
  --l: 40px; /* line thickness*/
  --s: 25px; /* thumb size*/
  
  width: 400px;
  height: var(--s); /* needed for Firefox*/
  --_c: color-mix(in srgb, var(--c), #000 var(--p,0%));
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
}

input[type="range"]:focus-visible,
input[type="range"]:hover {
  --p: 25%;
}

input[type="range"]:active,
input[type="range"]:focus-visible {
  --_b: var(--s);
}

/* Chromium */
input[type="range"]::-webkit-slider-thumb {
  height: var(--s);
  aspect-ratio: 1;
  border-radius: 80%;
  box-shadow: 0 0 0 var(--_b, var(--l)) inset var(--_c);
  border-image: linear-gradient(90deg, var(--_c) 50%, #ababab 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
  -webkit-appearance: none;
  appearance: none;
  transition: .3s;
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
  height: var(--s);
  width: var(--s);
  background: none;
  border-radius: 80%;
  box-shadow: 0 0 0 var(--_b, var(--l)) inset var(--_c);
  border-image: linear-gradient(90deg, var(--_c) 50%, #ababab 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
  -moz-appearance: none;
  appearance: none;
  transition: .3s;
}

@supports not (color: color-mix(in srgb, red, red)) {
  input[type="range"] {
    --_c: var(--c);
  }
}

/* Reset styles for submit input */
input[type="submit"].btn {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  background-color: #333533;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

input[type="submit"].btn:hover {
  background-color: #555555;
}

.border-highlight{
  border:2px dashed green;  
  padding:0.03em 0.25em;
}

.ribbon-highlight{
  position:relative;
  margin:0.1em;
}
.ribbon-highlight:before{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:0.1em;
  border-width:0.5em;
  border-style:solid;
  border-color:lightgreen;
  position:absolute;
  width:100%;
  border-left-color:transparent;
  border-right-color:transparent;
}
.realistic-marker-highlight{
  position:relative;
}

.realistic-marker-highlight:before{
  content:"";
  background-color:#ff6db7;
  width:100%;
  height:1em;
  position:absolute;
  z-index:-1;
  filter:url(#marker-shape);
  left:-0.25em;
  top:0.1em;
  padding:0 0.25em;
}