/**
 * @file
 * Ckeditor styles
 * Use Globaly
 */


/**
 * Font Size
 */

.heading-size-xs {
  font-size: var(--heading-size-xs);
}
.heading-size-s {
  font-size: var(--heading-size-s);
}
.heading-size-m {
  font-size: var(--heading-size-m);
}
.heading-size-l {
  font-size: var(--heading-size-l);
}
.special-3 {
  position: relative;
  display: block;
  width: 22px;
  height: 25px;
}
.special-3::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -3px;
  display: block;
  width: 22px;
  height: 26px;
  background-image: url('../../images/decoration/special-3.svg');
  background-position: center;
  background-repeat: no-repeat;
}
@media all and (min-width: 1000px){
  .special-3 {
    width: 54px;
    height: 61px;
  }
  .special-3::before {
    left: -3px;
    top: -3px;
    width: 54px;
    height: 62px;
    background-size: cover;
  }
}


.warning {
  color: var(--color-brand--dark-orange-2);
  font-size: var(--content-size-s);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}
.orange {
  color: var(--color-brand--dark-orange-2);
}

/**
 * Text style H2 block PF footer
 */

p.pf-h2 {
  color: var(--color-pf--1);
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  font-size: var(--heading-size-m);
}
p.pf-h2 strong {
  position: relative;
  z-index: 0;
  word-break: keep-all;
  font-weight: 700;
  color: var(--color-pf--1);
}
p.pf-h2 strong::after {
  display: block;
  content: "";
  position: absolute;
  height: 25px;
  top: 40%;
  left: -5px;
  right: -5px;
  z-index: -1;
  border-radius: 12px;
  background-color: var(--color-neutral--white);
}
p.pf-h2 strong::after {
  height: 20px;
}
@media all and (min-width: 1000px) {
  p.pf-h2 strong::after {
    top: 50%;
    height: 25px;
  }
}

/**
 * Text Large
 */

.text-large-red {
  color: var(--color-brand--dark-orange-2);
  font-size: var(--heading-size-xs);
  font-weight: 700;
  margin-bottom: 0;
}