whmcsCrosterTemplates/assets/less/tabs-accordions.less

@tabs-color: @themeColor;

//Tabs Bars
.@{brand}-tabsbar {
	margin-bottom: 15px;
	.nav-tabs {
		border: 1px solid @default-border-color;
		margin-bottom: 15px;
		li {
			height: 41px;
			padding: 1px;
			display: inline-block;
			margin-bottom: 0;
			border-right: 1px solid @default-border-color;
			a {
				border: 0 none;
				height: 39px;
				line-height: 39px;
				display: block;
				padding: 0 15px;
				color: @baseFontcolor;
				margin-right: 0;
				
				&:active, &:focus {
					outline:none !important;
				}
				
				&,&:focus {
					border-radius:0 !important;
				}
				
				&:hover {
					background-color: transparent; 
				}
				
				.badge {
					margin-left: 4px;
				}
				
				&.active {
					background: @tabs-color;
					color: @white;
					border: 0 none;
						
					&:hover, &:focus {
						border: 0 none;
					}
				}
				
				&:first-child {
					border-left: 0 none;
				}
			}

			

		}
	}	
	&.lg {
		@media (min-width: 768px) {
			.nav-tabs {
				li {
					height: 60px;
					padding: 3px;
				
					a {
						height: 54px;
						line-height: 54px;
						font-size: @baseFontSize + 1;
					}
				}
			}
		}
	}	
	&.arrow {
		.nav-tabs {
			li {
				a {
					&.active {					
						&:after {
							width: 0; height: 0;
							z-index: 2;
							content: " "; 
							display: block; 
							border: 10px solid;
							border-color: @tabs-color transparent transparent transparent;
							margin: 0 auto -7px;
						}
					}
				}
			}
		}	
	}
}


@media (max-width: 767px) {
	.@{brand}-tabsbar {
		.nav-tabs {
			li {
				a {
					&.active {
						border-color: @tabs-color!important;
					}
				}
			
			}
		}	
		&.arrow {
			.nav-tabs {
				li {
					a {
						&.active {					
							&:after {
								display: none!important; 
							}
						}
					}
				}
			}	
		}
		
		&.tabs-primary {
			.nav-tabs {
				li {
					a {
						&.active {
							border-color: @brand-primary!important;
						}
					}
				}
			}
		}
	}
}


.@{brand}-sub-menu {
	padding-top: 15px;
	border-bottom: 1px solid @default-border-color;
	
	ul {
		list-style: none;
		padding-left: 0; margin: 0;
		li {
			float: left;
			padding: 15px;
			position: relative;
			a {
				text-decoration: none!important;
				color: @baseFontcolor;
				font-weight: 700;
			}
			
			&.active {				
				&:after {
					width: 100%;
				}
			}
			
			&:after {
				content: "";
				position: absolute;
				bottom: 0;
				width: 0;
				left: 0;
				height: 4px;
				background: @brand-secondary;
				transition: all cubic-bezier(0.215,0.61,0.355,1) 0.25s;
			}
		}
	}
}

// Accordion styles
//------------------------------------

.card-faqs-group {
	.card {
		.card-header {
			padding: 0;
			border-bottom: 0 none;
			background-color: transparent;
			.btn {
				display: flex;
				align-items: center;
				width: 100%;
				padding: @card-spacer-y @card-spacer-x;
				
				border: 0 none;
				.card-title {
					font-weight: 500;
					margin-right: auto;
					margin-bottom: 0;
				}
				.card-icon {
					[class*=" fa-"], [class^="fa-"] {
						font-size: 1.75rem;
					}
				}
			}
			.card-title {
				font-size: 1.125rem;
				font-weight: 500;
				margin-right: auto;
				margin-bottom: 0;
			}			
		}
		&:last-child {
			margin-bottom: 0;
		}
		&:not(.accordion-active) {
			box-shadow: none;
			&:hover, &:focus {
				/* border: 1px solid var(--primary); */
			}			
		}
		&.accordion-active {
			.card-header {
				.card-title {
					color: var(--primary);
				}
			}			
		}
	}
	&:not(.accordion) {
		.card {
			margin-bottom: 1rem;
		}
	}
	
	&.accordion {
		.card {
			border: 0 none;
			box-shadow: none;
			background-color: transparent;
			.card-header {
				background-color: transparent;
				.btn {
					padding-left: 0;
					padding-right: 0;
				}
			}
			.card-body {
				padding-left: 0;
				padding-right: 0;
				padding-top: 0;
			}
			&:not(.accordion-active) {
				&:hover, &:focus {
					border: 0 none;
				}			
			}			
		}		
	}
}