.tab-wrapper{flex-direction:column;margin:0 auto}.tab-list,.tab-wrapper{display:flex;width:100%}.tab-list{border-right:1px solid #ddd;flex-direction:row;max-width:100%}.tab{background-color:#f4f4f4;cursor:pointer;padding:15px;position:relative;transition:background-color .3s,border-color .3s;width:100%}.tab:hover{background-color:#eaeaea}.tab.active{background-color:#d3e2d7;border-left-color:#d3e2d7;font-weight:700}.tab.active:before{border-color:transparent #d3e2d7 transparent transparent;border-style:solid;border-width:15px 20px 15px 0;bottom:-25px;content:"\A";left:50%;position:absolute;transform:rotate(-90deg);transform:rotate(-90deg) translateY(-50%)}.tab-content{background:#f8f8f8;flex:1;margin-top:1.5rem;padding:20px;width:100%}.content{display:none}.content.active{display:block}@media (max-width:768px){.tab-wrapper{flex-direction:column;width:100%}.tab-list{border-bottom:1px solid #ddd;border-right:none;flex-direction:row;overflow-x:auto;width:100%}.tab{border-bottom:2px solid transparent;border-left:none;flex:1;padding:12px;text-align:center}.tab.active{background-color:#fff;border-bottom-color:#d3e2d7;border-left:none}.tab-content{padding:15px}}