joomla-tab { display: flex; flex-direction: column; } joomla-tab[orientation=horizontal]:not([view=accordion]) { margin-bottom: 0; } joomla-tab[orientation=horizontal]:not([view=accordion]) div[role=tablist] { width: 100%; margin-bottom: 0; } joomla-tab > div[role=tablist] { display: flex; flex-flow: wrap; padding: 0; white-space: nowrap; list-style: outside none none; border-bottom: 1px solid var(--template-bg-dark-10); } joomla-tab > div[role=tablist] button[role=tab] { position: relative; box-sizing: border-box; display: block; padding: 0.6rem 1rem; color: var(--primary); text-decoration: none; background-color: var(--white); border: 0; border-top: 0; border-right: 0; border-bottom: 0; box-shadow: none; } joomla-tab > div[role=tablist] button[role=tab]:focus-visible { z-index: 1; } joomla-tab > div[role=tablist] button[role=tab][aria-expanded=true], joomla-tab > div[role=tablist] button[role=tab]:focus, joomla-tab > div[role=tablist] button[role=tab]:hover { border: 0; border-radius: 0; box-shadow: none; } joomla-tab > div[role=tablist] button[role=tab][aria-expanded=true]::after, joomla-tab > div[role=tablist] button[role=tab]:focus::after, joomla-tab > div[role=tablist] button[role=tab]:hover::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; content: ""; background-color: var(--template-link-color); opacity: 0.8; } joomla-tab > div[role=tablist] button[role=tab][aria-expanded=true] .text-muted, joomla-tab > div[role=tablist] button[role=tab]:focus .text-muted, joomla-tab > div[role=tablist] button[role=tab]:hover .text-muted { color: var(--template-text-light) !important; } joomla-tab > div[role=tablist] button[role=tab][aria-expanded=true] { font-weight: 700; background: var(--template-bg-dark-3); } joomla-tab > div[role=tablist] button[role=tab] .text-muted { color: var(--template-text-dark) !important; } joomla-tab > button[role=region] { width: 100%; padding: 0.7rem; color: var(--template-text-light); text-align: start; background-color: var(--template-link-color); border: 1px solid var(--template-text-light); border-top: 0; } joomla-tab > button[role=region][aria-expanded=true], joomla-tab > button[role=region]:hover, joomla-tab > button[role=region]:focus { color: var(--template-text-light); background-color: var(--template-bg-dark); } joomla-tab > button[role=region] .text-muted { color: var(--template-text-light) !important; } joomla-tab > joomla-tab-element { --gutter-x: 2rem; display: none; padding: 30px 2vw; background-color: #fff; border: 0; border-radius: 0.25rem; box-shadow: none; } joomla-tab > joomla-tab-element[active] { display: block; } joomla-tab[orientation=vertical] { flex-direction: row; align-items: flex-start; width: 100%; } joomla-tab[orientation=vertical] > div[role=tablist] { flex: 0 0 25%; flex-direction: column; width: 100%; min-width: 25%; max-width: 25%; height: auto; padding: 0; overflow: hidden; border: 1px solid #dee2e6; border-radius: 0; box-shadow: none; } @media (max-width: 991.98px) { joomla-tab[orientation=vertical] > div[role=tablist] { flex: 0 0 100%; max-width: 100%; } } joomla-tab[orientation=vertical] > div[role=tablist] button[role=tab] { text-align: start; } joomla-tab[orientation=vertical] > div[role=tablist] button[role=tab][aria-expanded=true] { color: var(--template-text-light); background-color: var(--template-bg-dark-60); } joomla-tab[orientation=vertical] button[role=tab]:last-of-type { border-bottom: 0; } joomla-tab[orientation=vertical] button[role=tab] { position: relative; display: block; padding: 0.75em 1em; margin: -1px 0; color: var(--template-special-color); text-decoration: none; border-top: 1px solid transparent; border-bottom: 1px solid #dee2e6; box-shadow: none; } joomla-tab[orientation=vertical] button[role=tab][aria-expanded=true], joomla-tab[orientation=vertical] button[role=tab]:focus, joomla-tab[orientation=vertical] button[role=tab]:hover { color: var(--template-text-light); background-color: var(--template-bg-dark-60); background-image: none; border-right: 0; box-shadow: none; } joomla-tab[orientation=vertical] button[role=tab][aria-expanded=true]::after, joomla-tab[orientation=vertical] button[role=tab]:focus::after, joomla-tab[orientation=vertical] button[role=tab]:hover::after { top: 0; bottom: 0; left: -1px; width: 5px; height: auto; background-color: var(--template-bg-dark); } joomla-tab[orientation=vertical] button[role=tab][aria-expanded=true] .text-muted, joomla-tab[orientation=vertical] button[role=tab]:focus .text-muted, joomla-tab[orientation=vertical] button[role=tab]:hover .text-muted { color: var(--template-text-light) !important; } joomla-tab[orientation=vertical] button[role=tab] .text-muted { color: var(--template-text-dark) !important; } joomla-tab[orientation=vertical] > joomla-tab-element { width: 100%; padding: 15px 0 15px 15px; border: 0 none; box-shadow: none; } joomla-tab[view=accordion] { flex-direction: column; white-space: normal; border-radius: 0; box-shadow: 0 1px #fff inset, 0 0 3px rgba(0, 0, 0, 0.04); } joomla-tab[view=accordion] joomla-tab-element { display: none; padding: 15px; } joomla-tab[view=accordion] joomla-tab-element[active] { display: block; width: 100%; max-width: 100%; border-bottom: 1px solid #dee2e6; } joomla-tab[view=accordion] [active], joomla-tab[view=accordion] [aria-expanded=true] { background-color: #fff; } joomla-tab[view=accordion] .col-md-6, joomla-tab[view=accordion] .col-md-9, joomla-tab[view=accordion] .col-md-3 { padding: 0.5rem 0 0 !important; } joomla-tab[view=accordion] joomla-tab[view=accordion] > div[role=tablist] { background-color: #fff; } joomla-tab[view=accordion] joomla-tab[view=accordion] button[role=tab] { position: relative; display: block; padding: 0.75em 1em; color: var(--template-text-light); text-align: start; text-decoration: none; border: 0; border-bottom: 1px solid #dee2e6; box-shadow: none; } joomla-tab[view=accordion] joomla-tab[view=accordion] button[role=tab][aria-expanded=true]::after, joomla-tab[view=accordion] joomla-tab[view=accordion] button[role=tab]:hover::after { position: absolute; top: auto; right: -1px; bottom: -1px; left: -1px; display: block; width: calc(100% + 2px); height: 5px; content: ""; background-color: var(--template-bg-dark); opacity: 0.8; } joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] { padding: 0 !important; } @media (max-width: 991.98px) { joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] { /* stylelint-disable */ /* stylelint-enable */ } [dir=ltr] joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable { text-align: right; } [dir=rtl] joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable { text-align: left; } joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable, joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable thead, joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable tbody, joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable tr, joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable th, joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable td { display: block; } joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable thead { position: absolute; top: -1111px; left: -1111px; } joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable td::before { font-weight: 700; content: attr(data-label) ":"; } [dir=ltr] joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable td::before { float: left; padding: 0 2em 0 0; } [dir=rtl] joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable td::before { float: right; padding: 0 0 0 2em; } joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable td:nth-child(1) { font-weight: 700; } joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable td:last-child { border-bottom: 1em var(--template-bg-dark-80) solid; } joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .oddCol { background: var(--template-bg-light); } } .main-card-columns > * > joomla-tab { height: 100%; border-left: 1px solid var(--template-bg-dark-10); }