Most Read Content
The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox
jumps over the lazy dog. The quick brown fox jumps over
the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox
jumps over the lazy dog. The quick brown fox jumps over
the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog.
Commented Content
The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox
jumps over the lazy dog. The quick brown fox jumps over
the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog. The quick brown fox
jumps over the lazy dog. The quick brown fox jumps over
the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog.
*/
.mar-tab {
padding: 0 10px;
}
@media (min-width: 992px) {
.mar-tab {
padding: 0;
}
}
.mar-tab__headings {
list-style: none;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0;
width: 100%;
position: relative;
margin: 0 20px 24px 0;
overflow-x: auto;
}
.mar-tab__headings::after {
content: "";
height: 1px;
background-color: #9DA0A4;
width: 100%;
display: block;
position: absolute;
bottom: 1px;
}
.mar-tab__heading-line {
display: block;
z-index: 1;
width: 0;
height: 4px;
background: transparent;
}
.mar-tab__heading-link {
font-family: var(--heading-font);
font-size: var(--font-size-l);
font-weight: var(--font-weight-bold);
color: #000000;
margin-top: 15px;
text-decoration: none;
opacity: 0.6;
}
.mar-tab__heading-link:hover {
text-decoration: none;
cursor: pointer;
color: #000000;
}
.mar-tab__heading-real-link {
font-family: var(--body-font);
font-size: var(--font-size-l);
font-weight: var(--font-weight-bold);
color: #000000;
margin-top: 15px;
text-decoration: none;
opacity: 0.6;
}
.mar-tab__heading-real-link:hover {
text-decoration: none;
cursor: pointer;
color: #000000;
}
.mar-tab__heading-item {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
font-family: var(--heading-font);
}
.mar-tab__heading-item:not(:last-child) {
margin-right: 30px;
}
.mar-tab__heading-item::before {
content: none;
}
.mar-tab__heading-item.mar-tab--active .mar-tab__heading-line {
width: 100%;
background: var(--accent-colour);
z-index: 1;
}
.mar-tab__heading-item.mar-tab--active .mar-tab__heading-link {
color: #000000;
font-family: var(--heading-font);
opacity: 1;
}
.mar-tab__heading-item.mar-tab--active .mar-tab__heading-real-link {
color: #000000;
opacity: 1;
}
.mar-tab__heading-item h2 {
margin-bottom: 0;
}
.mar-tab__body {
display: none;
margin: 20px;
}
.mar-tab__body.mar-tab--active {
display: block;
}
.nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-tabs {
border-bottom: 1px solid #DEE2E6;
}
.nav-tabs .nav-item {
margin-bottom: -1px;
}
.nav-tabs .nav-link {
display: block;
padding: 0.5rem 1rem;
border: 1px solid transparent;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.nav-tabs .nav-link:hover {
border-color: #E9ECEF #E9ECEF #DEE2E6;
}
.nav-tabs .nav-link.disabled {
color: #6C757D;
background-color: transparent;
border-color: transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
color: #495057;
background-color: #FFFFFF;
border-color: #DEE2E6 #DEE2E6 #FFFFFF;
}
.tab-content > .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}
.btn-group-vertical {
position: relative;
display: inline-flex;
vertical-align: middle;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
/* html-documentation