diff --git a/layouts/partials/shortcodes/tabs.html b/layouts/partials/shortcodes/tabs.html
index 770c725742..7054fa0759 100644
--- a/layouts/partials/shortcodes/tabs.html
+++ b/layouts/partials/shortcodes/tabs.html
@@ -2,27 +2,28 @@
 {{- $tabs := .content | default slice }}
 {{- $groupid := .groupid | default (partial "make-random-md5.hugo" $context) }}
 {{- with $context }}
-<div class="tab-panel cstyle default" data-tab-group="{{ $groupid }}">
+<div class="tab-panel" data-tab-group="{{ $groupid }}">
   <div class="tab-nav">
   {{- range $idx, $tab := $tabs }}
     <button
       data-tab-item="{{ .name | $context.RenderString | plainify }}"
-      class="tab-nav-button{{ cond (eq $idx 0) " active" ""}}"
+      class="tab-nav-button tab-panel-style cstyle default{{ cond (eq $idx 0) " active" ""}}"
       onclick="switchTab('{{ $groupid }}','{{ .name | $context.RenderString | plainify}}')"
     >
       <div><div>{{ .name | $context.RenderString }}</div></div>
     </button>
   {{- end }}
   </div>
-  <div class="tab-content">
-    {{- range $idx, $tab := $tabs }}
+  <div class="tab-content-container">
+  {{- range $idx, $tab := $tabs }}
     <div
       data-tab-item="{{ .name | $context.RenderString | plainify }}"
-      class="tab-content-text{{ cond (eq $idx 0) " active" ""}}"
-    >
+      class="tab-content tab-panel-style cstyle default{{ cond (eq $idx 0) " active" ""}}">
+      <div class="tab-content-text">
 {{ if ne "<" (substr (strings.TrimLeft " " .content) 0 1) }}<p>{{ end }}<!-- we add a DOM element here if there is none to make collapsing marings work -->
 {{ .content | safeHTML }}</div><!-- no line break allowed here because of awkward behavior of Hugo 110 or this theme when tag shortcode is called standalone outside of tags shortcode ? -->
-    {{- end }}
+    </div>
+  {{- end }}
   </div>
 </div>
 {{- end }}
\ No newline at end of file
diff --git a/static/css/theme.css b/static/css/theme.css
index 23ee6151a4..4b63ef98a0 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1882,14 +1882,18 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
 #body .tab-content{
     border-style: solid;
     border-width: 1px;
-    display: block;
+    display: none;
     /* if setting a border to 1px, a browser instead sets it to 1dppx which is not
     usable as a unit yet, so we have to calculate it ourself */
     margin-top: calc( -1px / var(--dpr) );
     z-index: 10;
 }
+
+#body .tab-content.active{
+    display: block;
+}
+
 #body .tab-content-text{
-    display: none;
     padding: 1rem;
 }
 /* remove margin if only a single code block is contained in the tab */
@@ -1900,10 +1904,6 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
 #body .tab-content-text > div.highlight:only-child > pre{
     border: 0;
 }
-#body .tab-content-text.active{
-    display: block;
-}
-
 #body .tab-content-text pre{
     margin-bottom: 0;
     margin-top: 0;
diff --git a/static/css/variant.css b/static/css/variant.css
index 9d56fa3a3c..a4e5b2f3bf 100644
--- a/static/css/variant.css
+++ b/static/css/variant.css
@@ -398,25 +398,25 @@ article ul > li > input[type="checkbox"] {
     color: var(--VARIABLE-BOX-TEXT-color);
 }
 
-.tab-panel.cstyle.default {
+.tab-panel-style.cstyle.default {
     --VARIABLE-BOX-color: rgba( 134, 134, 134, .4 );
     --VARIABLE-BOX-BG-color: var(--INTERNAL-MAIN-BG-color);
 }
 
-.tab-panel.cstyle.transparent {
+.tab-panel-style.cstyle.transparent {
     --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
     --VARIABLE-BOX-BG-color: transparent;
 }
 
-#body .tab-panel.cstyle.default > * > .tab-nav-button.active,
-#body .tab-panel.cstyle.transparent > * > .tab-nav-button.active{
+#body .tab-panel-style.cstyle.default.tab-nav-button.active,
+#body .tab-panel-style.cstyle.transparent.tab-nav-button.active{
     background-color: var(--VARIABLE-BOX-BG-color);
     border-left-color: var(--VARIABLE-BOX-color);
     border-right-color: var(--VARIABLE-BOX-color);
     border-top-color: var(--VARIABLE-BOX-color);
 }
 
-#body .tab-panel.cstyle.default > .tab-content,
-#body .tab-panel.cstyle.transparent > .tab-content{
+#body .tab-panel-style.cstyle.default.tab-content,
+#body .tab-panel-style.cstyle.transparent.tab-content{
     background-color: var(--VARIABLE-BOX-BG-color);
 }