.accordion.accordion-sample {
    display: none;
}

.accordion > input[type="checkbox"] {
    position: absolute;
    left: -100vw;
}

.accordion .content {
    overflow-y: hidden;
    height: 0;
    color:#7d8997;
    /*transition: all 0.3s ease;*/
    line-height:1.5;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

body.light .accordion .content {
    background-color: #fff;
}

body.dark .accordion .content {
    background-color: #000;
}

.accordion .handle .continue-conversation {
    position: absolute;
    right: 61px;
    top:50%;
    transform:translateY(-50%);
    cursor: pointer;
    font-size:22px;
    transition: all .2s ease-in-out;
}

.accordion .handle .copy-prompt {
    position: absolute;
    right: 38px;
    top:50%;
    transform:translateY(-50%);
    cursor: pointer;
    font-size:22px;
    transition: all .2s ease-in-out;
}

.accordion .handle .delete-prompt {
    position: absolute;
    right: 15px;
    top:50%;
    transform:translateY(-50%);
    cursor: pointer;
    font-size:22px;
    transition: all .2s ease-in-out;
}

body.light .accordion .handle svg
{
    color:#9caabb;
}

body.dark .accordion .handle svg
{
    color:#3d4349;
}

body.light .accordion .handle svg:hover
{
    color:#adbcce;
}

body.dark .accordion .handle svg:hover
{
    color:#555d65;
}

.accordion {
    margin-bottom: 1em;
}

.accordion > input[type="checkbox"]:checked ~ .content {
    height: auto;
    overflow: visible;
    padding: 15px;
    border-top: 0;
}

body.light .accordion > input[type="checkbox"]:checked ~ .content {
    border: 1px solid #a0aaba;
}

body.dark .accordion > input[type="checkbox"]:checked ~ .content {
    border: 1px solid #5a6067;
}

.accordion .handle {
    margin: 0;
    font-size: 1.125em;
    line-height: 1.2em;
    position: relative;
}

.accordion label {
    display: block;
    cursor: pointer;
    font-weight: 500;
    font-size: 15px;
    padding: 15px 80px 15px 15px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 4px;
}

body.light .accordion label {
    background: #e4e7ef;
    border: 1px solid #a0aaba;
    color: #7d8997;
}

body.dark .accordion label {
    background: #000;
    border: 1px solid #5a6067;
    color: #7d8997;
}

.accordion > input[type="checkbox"]:checked ~ .handle label
{
    border-radius: 4px 4px 0 0;
    border-bottom: 0;
}

body.light .accordion label:hover,
body.light .accordion label:focus {
    background: #dfe3ea;
}

body.dark .accordion label:hover,
body.dark .accordion label:focus {
    background: #0e0f0f;
}

.accordion .handle label:before {
    font-family: 'fontawesome';
    content: "\f054";
    display: inline-block;
    margin-right: 10px;
    font-size: .58em;
    line-height: 1.556em;
    vertical-align: middle;
    min-width: 10px;
}

.accordion > input[type="checkbox"]:checked ~ .handle label:before {
    content: "\f078";
}

.accordion:last-child {
    margin-bottom: 0;
}