.collapse-init summary + * {
    transition: all 0.25s ease-in-out;
    overflow: hidden;
}

/*
  Closed state. Any CSS transitions work here
  The JS has a height calculation to make sliding opened/closed easier, but it's not necessary
  Remove the height prop for a simple toggle on/off (after all that work I did for you?)
*/
.collapse-init :not(.panel-active) summary + * {
    height: 0;
    opacity: 0;
    transform: scale(0.9);
    transform-origin: bottom center;
}

.collapse-init summary {
    list-style: none;
}
.collapse-init summary::-webkit-details-marker {
    display: none;
}
.collapse-init summary::before {
    display: none;
}
.collapse-init summary {
    cursor: pointer;
}

/*
  This element exists so .details-wrapper has no extra margin/padding that can screw with the smooth height collapse
  You can style .details-wrapper decoratively but avoid anything that modifies the box and add it to .details-styling instead
  Otherwise, this element is totally optional. Remove if you hate divitis
*/
.details-styling {
    padding: 0 34px 1em 61px;
    text-align: left;
}

@media screen and (max-width: 768px) {
    .details-styling {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.contain .details-styling {
    padding: 0 0 1em 0;
}

::-moz-selection {
    background: #fbcb6a;
    color: #4d4433;
}

::selection {
    background: #fbcb6a;
    color: #202020;
}

.containe {
    box-shadow: 0.2em 1em 2em -1em #d6d1e0;
    margin: 2.4em 0;
}

.contain {
    box-shadow: none;
    margin: 0;
}

details {
    background: #f9f9f9;
    border: 1px solid #d6d1e0;
    list-style: none;
    margin-bottom: 25px;
    position: relative;
}

.contain details {
    background: transparent;
    border: none;
    border-bottom: 1px dashed #202020;
    margin-bottom: 0;
}

details:first-child {
    border-radius: 6px 6px 0 0;
}

details:last-child {
    border-bottom: 1px solid #d6d1e0;
    border-radius: 0 0 6px 6px;
}

.contain details:last-child {
    border-bottom: 1px dashed #202020;
}

summary {
    text-align: left;
    display: block;
    transition: 0.2s;
    padding: 1em;
    color: #202020;
}

.contain summary {
    padding: 1em 0;
}

summary:focus {
    outline: 2px solid #5b13ec;
}

.contain summary:focus {
    outline: none;
}

.collapse-init summary::after {
    border-right: 2px solid;
    border-bottom: 2px solid;
    content: "";
    float: right;
    width: 0.5em;
    height: 0.5em;
    margin-top: 0.25em;
    transform: rotate(45deg);
    transition: inherit;
}

.contain .collapse-init summary::after {
    content: '+';
    color: #202020;
}

[open] summary {
    background: #f9f9f9;
    color: #202020;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
}

.contain [open] summary {
    background: transparent;
}

.live-timings {
    display: none;
    position: absolute;
    right: -100px;
}

[open] .live-timings {
    display: inline-block;

}

[open] summary::after {
    margin-top: 0.5em;
    transform: rotate(225deg);
}