.tab-component {
display: block;
max-width: 100%;
}
.tab-component .nav-tabs {
width: 100%;
background-color: #f2f3f3;
display: flex;
flex: 1;
flex-direction: row;
}
.tab-component .nav-tabs .nav-item {
display: flex;
flex: 1;
align-items: stretch;
}
.tab-component .nav-tabs .nav-item .nav-link {
display: flex;
align-items: center;
flex: 1;
justify-content: center;
min-width: 71px;
min-height: 64px;
padding: 10px 10px;
border-radius: 0;
border: 1px solid #e3e3e3;
transition: background-color 200ms;
}
.tab-component .nav-tabs .nav-item .nav-link:hover {
background-color: #dee2e6;
}
.tab-component .nav-tabs .nav-item .nav-link .tab-title {
color: #495057;
font-size: 0.75rem;
font-weight: 700;
text-align: center;
transition: 100ms ease-in-out;
}
@media (min-width: 992px) {
.tab-component .nav-tabs .nav-item .nav-link .tab-title {
font-size: 1.125rem;
}
.tab-component .nav-tabs .nav-item .nav-link {
min-height: 94px;
}
}
.tab-component .nav-tabs .nav-item .nav-link .tab-title .icon {
filter: invert(50%) sepia(10%) saturate(357%) hue-rotate(164deg) brightness(95%) contrast(88%);
width: 20px;
height: auto;
display: block;
margin: auto;
margin-bottom: 1px;
transition: 100ms ease-in-out;
}
.tab-component .nav-tabs .nav-item .nav-link.active {
border-top: 7px solid #22bcb9;
}
.tab-component .nav-tabs .nav-item .nav-link.active .tab-title {
color: #004680;
}
.tab-component .nav-tabs .nav-item .nav-link.active .tab-title .icon {
filter: invert(59%) sepia(25%) saturate(1230%) hue-rotate(130deg) brightness(100%) contrast(88%);
}
.tab-component .nav-tabs.orange .nav-item .nav-link.active {
border-top-color: #f47735;
}
.tab-component .nav-tabs.orange .nav-item .nav-link.active .tab-title .icon {
filter: invert(60%) sepia(63%) saturate(3050%) hue-rotate(339deg) brightness(99%) contrast(92%);
}
.tab-component .tab-content {
border-left: 1px solid #e3e3e3;
border-right: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
padding: 15px;
}
@media (min-width: 992px) {
.tab-component .tab-content {
padding: 20px 30px;
}
}