myprojectpackageprav/dist/esm/src/components/tabs/tabs.css

My package in npm

.customTabs {display: flex;flex-direction: column;}
.customTabs ul {display: flex;padding-left: 0px;flex-wrap: wrap;align-items: flex-start;position: relative;height: inherit;}
.customTabs ul .customtabs-list {display: flex;padding-left: 0px;flex-wrap: nowrap;align-items: flex-start;position: relative;height: inherit;list-style-type: none;font-weight: normal;font-size: 14px;}
.customTabs ul:before {content: "";width: 100%;position: absolute;height: 3px;top: 33px;background-color: var(--rb-tabs-border-color);}
.customTabs.border1 ul:before {background-color: var(--rb-tabs-border1-color);}
.customTabs.border2 ul:before {background-color: var(--rb-tabs-border2-color)}
.customTabs.border3 ul:before {background-color: transparent}

.customTabs ul .customtabs-list li a.active,
.customTabs ul .customtabs-list li a:focus,
.customTabs ul .customtabs-list li a:hover {border-bottom: solid 3px var(--rb-tabs-active-border-color);z-index: 1;}

.customTabs.border1 ul .customtabs-list li a.active,
.customTabs.border1 ul .customtabs-list li a:focus,
.customTabs.border1 ul .customtabs-list li a:hover {border-bottom-color: var(--rb-tabs-active-border1-color);z-index: 1;}

.customTabs.border2 ul .customtabs-list li a.active,
.customTabs.border2 ul .customtabs-list li a:focus,
.customTabs.border2 ul .customtabs-list li a:hover {border-bottom-color: var(--rb-tabs-active-border2-color);z-index: 1;}

.customTabs.border3 ul .customtabs-list li a.active,
.customTabs.border3 ul .customtabs-list li a:focus,
.customTabs.border3 ul .customtabs-list li a:hover {border-bottom-color: var(--rb-tabs-active-border-color);z-index: 1;}

.customTabs ul .customtabs-list li a {position: relative;padding: 0px 0;margin: 0 20px 3px 0;height: 36px;line-height: 36px;border: 0px;border-bottom: 3px;list-style-type: none;cursor: pointer;display: block;text-decoration: none !important;}

.customTabs ul li a {white-space: nowrap;}
.customTabs.sm ul li a {font-size: 12px;height: 24px;line-height: 24px;}
.customTabs.lg ul .customtabs-list li a {font-size: 16px;height: 44px;line-height: 44px;}
.customTabs.xl ul .customtabs-list li a {font-size: 16px;height: 56px;line-height: 56px;}
.customTabs.xxl ul .customtabs-list li a {font-size: 16px;height: 73px;line-height: 73px;}

.customTabs.sm ul:before {top: 21px;}
.customTabs.lg ul:before {top: 41px;}
.customTabs.xl ul:before {top: 53px;}
.customTabs.xxl ul:before {top: 70px;}

.customTabs ul .customtabs-list li:last-child div {margin-right: 0px;}
.customTabs-content {padding: 8px 0px;}
.tabs .card-header {display: none !important;}

/* Vertical tabs css */
.tabs.v-tabs {display: flex;}
.tabs.v-tabs .customTabs { display: flex; flex-direction: column;}
.tabs.v-tabs .customtabs-list {flex-direction: column;margin-right: 0px;}
.tabs.v-tabs .customTabs ul:before {display: none;}
.tabs.v-tabs .customTabs ul .customtabs-list li{width:100%;}
.tabs.v-tabs .customTabs ul .customtabs-list > li a{padding: 0px 12px;height: 36px;line-height: 36px;border-radius: 20px;}
.tabs.v-tabs .customTabs ul .customtabs-list li a {width:100%;position: relative;margin: 0  0px 8px 0;border: 0px;border-bottom: 0px;list-style-type: none;cursor: pointer;display: block;text-decoration: none !important; }
.tabs.v-tabs .customTabs ul .customtabs-list > li a.active,
.tabs.v-tabs .customTabs ul .customtabs-list > li a:focus,
.tabs.v-tabs .customTabs ul .customtabs-list > li a:hover {border-bottom: solid 0px var(--rb-tabs-active-border-color); z-index: 1; background-color: var(--rb-bgcolor-primary); color: var(--rb-whitetext);}
.tabs.v-tabs .customTabs ul .customtabs-list > li a ~ div{display: none;}



/* Vertical tabs css End */