/* The quote block's accent, in one place. The editor used to set this colour
   inline on every quote it generated, with !important, which is a colour at a
   point of use and a forced cascade in one line. Named here, the markup carries
   no colour at all and the border and the two accent bars cannot drift apart. */
:root {
    --quote-accent: rgb(255, 0, 0); /* allowed-color: rule 218/5.1 */
}

 .quote-with-image.highlight {
    outline: 2px solid #0073aa;
    transition: outline 0.3s ease;
  }

   .yg-wdt-quoteMain-27 p{
    margin: 0;
    padding: 1rem 0;
}
.yg-wdt-quoteMain-27 .quotePartLeft{
    margin: 1rem 0;
    position: relative;
    font-size: 24px;
    font-weight: 600;
    line-height: 34px;
    padding-left: 1rem;
    border-left: 5px solid var(--quote-accent);
}
.yg-wdt-quoteMain-27 .quotePartLeft:before {
    content: "";
    height: 5px;
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
}
.yg-wdt-quoteMain-27 .quotePartLeft:after {
    bottom: 0;
    content: "";
    height: 5px;
    position: absolute;
    left: 0;
    width: 100px;
}
.yg-wdt-quoteMain-27 .quotePartRight{
    margin: 1rem 0;
    position: relative;
    font-size: 24px;
    font-weight: 600;
    line-height: 34px;
    padding-right: 1rem;
    border-right: 5px solid var(--quote-accent);
    text-align: right;
}
.yg-wdt-quoteMain-27 .quotePartRight:before {
    content: "";
    height: 5px;
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
}
.yg-wdt-quoteMain-27 .quotePartRight:after {
    bottom: 0;
    content: "";
    height: 5px;
    position: absolute;
    right: 0;
    width: 100px;
}
      .quotePartRight:before, .quotePartRight:after{
        background: var(--quote-accent);
      }