.kb-accordion {
    background-color: #f9f9f9;
    border: 1px solid #9673a6;
    padding: 5px 10px;
    margin: 0px 2px 5px 2px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.kb-accordion summary {
    font-size: 14px;
    font-weight: normal;
    margin: -5px -10px 5px;
    padding: 5px 10px;
    cursor: pointer;
    background-color: #E1D5E7; /* Default background for all summaries */
}

.kb-accordion[open] > summary {
    background-color: #9673a6; 
    color: #ffffff;
}

.kb-accordion a {
    scroll-margin-top: 45px;
}

.kb-accordion p {
    margin-bottom: 0.5em;
}

.kb-accordion ul {
    margin: 0px 0px 5px 0px;
    /* padding: 0 0 0 15px; */
    list-style-type: disc;
}
.w3-right {float: right;}
.circle-link {
    display:inline-block;
    margin:3px 3px 0 3px;
    font-size:1rem
  }
  .circle-link-bar {
    background:#fff;
    display:inline-flex;
    gap:10px;
    pointer-events:auto;
    float:right;
    margin:3px 6px;
    padding:0 5px;
    border-radius:5px
  }
  a.circle-link.red-circle i {
    color:#c62828
  }
  a.circle-link.orange-circle i {
    color:#ef6c00
  }
  a.circle-link.yellow-circle i {
    color:#fbc02d
  }
  a.circle-link.green-circle i {
    color:#388e3c
  }
  a.circle-link.blue-circle i {
    color:#1565c0
  }
  a.circle-link.purple-circle i {
    color:#7e047c
  }
  a.circle-link.cyan-circle i {
    color:#00FCFC
  }
  a.circle-link.red-hover:hover i {
    color:#e53935
  }
  a.circle-link.orange-hover:hover i {
    color:#fb8c00
  }
  a.circle-link.yellow-hover:hover i {
    color:#fdd835
  }
  a.circle-link.green-hover:hover i {
    color:#43a047
  }
  a.circle-link.blue-hover:hover i {
    color:#1e88e5
  }
  a.circle-link.purple-hover:hover i {
    color:#9c27b0
  }
  a.circle-link.cyan-hover:hover i {
    color:#00FCFC
  }
  /*shape with a tags highlight*/
a:hover rect,
a:hover circle,
a:hover ellipse,
a:hover polygon {
    fill: #00FCFC;
}
a.iframe-link:hover rect {fill: #9c27b0;}
a.svg-link:hover rect {fill: #FFA500;}
a.floating-link:hover rect {fill: #FFA500;}
a.step-focus:hover ellipse {fill: #9c27b0;}

.focus-zoom:hover circle,
.focus-zoom:hover ellipse,
.focus-zoom:hover rect,
.focus-highlight:hover circle,
.focus-highlight:hover ellipse,
.focus-highlight:hover rect {
  fill: #ff0000 !important;
}

.focus-highlight:hover text {
  fill: #fff !important;
}