/* General */
    .Accordion{ padding: 30px;}
/* Input */
    .Accordion > ul > li > input{ display: none;}
/* List */
    .Accordion > ul{background: #555; overflow: hidden; border: 1px solid #ccc; border-radius: 5px; margin: 0; padding: 0px;  }
    .Accordion > ul > li { border-bottom:1px solid #ccc;display: block;  }
    .Accordion > ul > li:last-child{border-bottom: none;}
    .Accordion > ul > li > div{ display: none; background: #555;overflow: hidden; box-sizing: border-box; }
    /* Content */
        .Accordion > ul > li > label{background-color: #fff; align-items:center; font-weight:bold; position: relative; flex-wrap: wrap; display: flex; cursor: pointer; font-size: 0.9em; overflow: hidden; padding: 0px 4em 0 2em;height: 4rem; line-height: 4rem; margin: 0px;}
        .Accordion > ul > li > label > i{ font-style: normal; align-self: initial; font-weight: normal; margin-left: 15px; color: #aaa; font-size: 0.8em; }
        .Accordion > ul > li:last-chil > p{ border-bottom: none;}
        .Accordion > ul > li > label > span{ text-overflow: ellipsis; color: #aaa;  margin-left: 10px; line-height: 30px; font-size: 12px;}
    /* Selection */
        .Accordion > ul > li > label { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none;  -ms-user-select: none; user-select: none;}
    /* Arrow */
        .Accordion > ul > li > label:after{ content: ""; transform: rotate(45deg); height: 10px; width: 2px; background: #666; right: 26px; border-radius:  2px; top: 50%; text-align: center; line-height: 30px; margin-top: -5px; display: block; position: absolute; text-align: center; }
        .Accordion > ul > li > label:before{ content: ""; transform: rotate(-45deg); height: 10px; width: 2px; background: #666; right: 32px; border-radius:  2px; top: 50%; text-align: center; line-height: 30px; margin-top: -5px; display: block; position: absolute; text-align: center;  }
        .Accordion > ul > li > input:checked + label:after{ transform: rotate(-45deg);}
        .Accordion > ul > li > input:checked + label:before{ transform: rotate(45deg);}
        /* Move */
            .Accordion > ul > li > label:after,.Accordion > ul > li > label:before { -webkit-transition: top 200ms ease-in-out; -moz-transition: top 200ms ease-in-out; -o-transition: top 200ms ease-in-out; transition: top 200ms ease-in-out; -ms-transition: top 200ms ease-in-out;}
    /* Link */
        .Accordion > ul > li > label > a{ margin-left: auto; text-transform: uppercase; line-height: 3em; height: 3em; background: rgba(0, 0, 0,0.04); letter-spacing: 1px; color: #000; padding: 0px 15px;  font-size: 10px;  border-radius: 1000px; text-decoration: none; }
        .Accordion > ul > li > label > a:hover{ background: #eee;}
        .Accordion > ul > li.active > label > i{ transform: rotate(180deg);}
    /* Hover */
        .Accordion > ul > li > label:hover{ background: rgb(250, 250, 250); }
    /* Active */
        .Accordion > ul > li > input:checked + label + div{ display: block; }
/* Print */
    @media print {
        .Accordion > ul{ border:none;}
        .Accordion > ul > li > p > a{ display: none;}
        .Accordion > ul > li > p:after{ display: none;}
        .Accordion > ul > li > div{ display: block;}
    }
/* Fonts */
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
    .Accordion { font-family: 'Open Sans', sans-serif; }