body{color:#3f3f3f;background:#fff}h1{margin:0;line-height:2;text-align:center}h2{margin:0 0 .5em;font-weight:400}input{position:absolute;opacity:0;z-index:-1}.row{display:flex}.row .col{flex:1}.row .col:last-child{margin-left:1em}.tabs{border-radius:8px;overflow:hidden;box-shadow:0 4px 4px -2px rgba(0,0,0,.5)}.tab{width:100%;color:#3f3f3f;overflow:hidden;border:1px solid #e4e4e4}.tab-label{display:flex;justify-content:space-between;padding:1em;background:#f2f2f2;font-weight:700;cursor:pointer}.tab-label:hover{background:#e4e4e4}.tab-label::after{content:"\276F";width:1em;height:1em;text-align:center;transition:all .35s}.tab-content{max-height:0;padding:0 1em;color:#3f3f3f;background:#fff;transition:all .35s}.tab-close{display:flex;justify-content:flex-end;padding:1em;font-size:.75em;background:#fff;cursor:pointer}.tab-close:hover{background:#e4e4e4}input:checked+.tab-label{background:#4ab865;color:#fff}input:checked+.tab-label::after{transform:rotate(90deg)}input:checked~.tab-content{max-height:100vh;padding:1em}