.accordion {
    --acc-bg-color: rgb(60 112 163);

    background: var(--acc-bg-color);
    overflow: hidden;
    margin-bottom: 15px;
}

.accordion__title-container {
    display: flex;
    cursor: pointer;
}

/* Dropdown icon */
.accordion__checkbox {
    all: unset;
    cursor: pointer;
    transition: transform .3s;

    padding-left: 5px;
    width: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Style the dropdown to be a chevron type icon */
:is(.accordion__checkbox, .accordion__checkbox:checked):after {
    content: ' ';
    display: inline-block;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    height: 12px;
    width: 12px;
    transition: transform .5s;
}
.accordion__checkbox:after {
    transform: rotate(-45deg) translateX(-2px) translateY(-2px);
}
.accordion__checkbox:checked:after {
    transform: rotate(45deg) translateX(-2px) translateY(-2px);
}

.accordion__title {
    color: white;

    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;

}

.accordion__content-box {
    background-color: white;
    opacity: 1;
    overflow: hidden;

    border: 5px solid var(--acc-bg-color);
    border-top: 0;
}

.accordion__content {
    padding: 10px;
}

.accordion__title-container:has(> .accordion__checkbox:not(:checked)) ~ .accordion__content-box {
    border-bottom: 0;
    height: 0;
}