.tabs-component-class:has(.tab-container,.tab-contents){display:grid;grid-template-columns:300px 1fr;gap:20px;margin:10px}.tab-container .tab{display:block;width:100%;padding:15px 20px;margin-bottom:20px;background-color:#f4f4f4;border-radius:10px;color:#2f2f2f;cursor:pointer;transition:background-color .3s;position:relative}.rtl .tab-container .tab:before{border-radius:0 4px 4px 0;right:-3px}.ltr .tab-container .tab:before{border-radius:4px 0 0 4px;left:-3px}.tab-container .tab:before{content:"";height:20px;width:3px;background-color:#86bc25;position:absolute;top:0;bottom:0;margin:auto}.tab-container .tab.tab-active,.tab-container .tab:hover{background-color:#10aec1;color:#fff;font-weight:700}.tab-content{background-color:#f4f4f4;border-radius:10px;padding:16px;-webkit-animation:fadeIn 1s;min-height:100%;animation:fadeIn 1s}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width:991px){.tabs-component-class:has(.tab-container,.tab-contents){display:flex;flex-direction:column;gap:0}}