:root {
    --accordion-title-background: #f9f9f9;
    --accordion-body-border-color: transparent;
    --accordion-expand-rate: 0.25s;
    --accordion-open-title-background: #f1f1f1;
    --accordion-border-radius: 4px;
    --accordion-fan-accordion-border-style: 1px solid #DDD;
    --accordion-title-text-transform: capitalize
}

accordion-element {
    width: 100%;
    box-sizing:border-box;
    margin-top: 10px;
    display: inline-block;
    height: unset;
    border-radius: var(--accordion-border-radius)
}

accordion-element>.ploiu-accordion-title {
    padding: 5px;
    padding-right: 20px;
   
    /*text-transform: var(--accordion-title-text-transform);*/
    border-radius: inherit
}

accordion-element>.ploiu-accordion-title:hover {
    cursor: pointer
}

accordion-element>.ploiu-accordion-body {
    border: 1px solid var(--accordion-body-border-color);
    
    transition: height var(--accordion-expand-rate);
    overflow: hidden
}

accordion-element>.ploiu-accordion-body>accordion-element {
    padding-left: 1em
}

accordion-element:not(.open)>.ploiu-accordion-body {
    height: 0 !important;
    border: 0
}

accordion-element.open {
    height: max-content
}

accordion-element.open>.ploiu-accordion-title {
  
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

accordion-fan {
    display: block;
    width: 95%;
    padding-top: 1vh
}

accordion-fan>accordion-element {
    margin-top: -1vh;
    border: var(--accordion-fan-accordion-border-style);
    border-radius: 0;
    width: 100%
}

accordion-fan>accordion-element>.ploiu-accordion-title {
    width: auto
}

accordion-fan>accordion-element:first-child {
    border-top-left-radius: var(--accordion-border-radius);
    border-top-right-radius: var(--accordion-border-radius)
}

accordion-fan>accordion-element:last-child {
    border-bottom-left-radius: var(--accordion-border-radius);
    border-bottom-right-radius: var(--accordion-border-radius)
}

.open>.ploiu-accordion-title{
    color:#0D4CD3;
    text-decoration: underline;
}