@para-ui/core 4.0.0-alpha → 4.0.0-rc

package/Styles/theme.scss

@@ -15,8 +15,9 @@ $large: 18px;
 $medium: 16px;
 $small: 14px;
 $smallest: 12px;
+
 $normal: 400;
-$medium: 500;
+$weightMedium: 500;
 $bold: 700;
 
 // 阴影
@@ -38,84 +39,84 @@ $dropdownItemHeight: 30px;
 
 // -------- UI提供的色卡--------//
 // 主题色
-$P1: rgba(46, 101, 230, 1); // 主题蓝
-$PT8: rgba(87, 131, 235, 1); // (80%)Hover
-$PT2: rgba(213, 224, 250, 1); // (20%)黛色分割线
-$PT05: rgba(240, 245, 255, 1); // (5%)背景
-$P2: rgba(46, 101, 230, 0.1); // (15%)背景
+$NP1: rgba(46, 101, 230, 1); // 主题蓝
+$NPT8: rgba(87, 131, 235, 1); // (80%)Hover
+$NPT2: rgba(213, 224, 250, 1); // (20%)黛色分割线
+$NPT05: rgba(240, 245, 255, 1); // (5%)背景
+$NP2: rgba(46, 101, 230, 0.1); // (15%)背景
 
 // 文字色
-$T1: rgba(29, 33, 38, 1); // 一级文案
-$T2: rgba(92, 101, 115, 1); // 二级文案
-$T3: rgba(161, 168, 179, 1); // 三级文案
+$NT1: rgba(29, 33, 38, 1); // 一级文案
+$NT2: rgba(92, 101, 115, 1); // 二级文案
+$NT3: rgba(161, 168, 179, 1); // 三级文案
 
 // 辅助色
-$A1: rgba(212, 218, 227, 1); // 描边、分割线
-$A2: rgba(234, 236, 241, 1); // 分割线
-$A3: rgba(247, 248, 250, 1); // 背景
-$A4: rgba(255, 255, 255, 1); // 万能色
-$A5: rgba(255, 255, 255, 0.5); // 万能色
-$A6: rgba(255, 255, 255, 0.3); // 万能色
+$NA1: rgba(212, 218, 227, 1); // 描边、分割线
+$NA2: rgba(234, 236, 241, 1); // 分割线
+$NA3: rgba(247, 248, 250, 1); // 背景
+$NA4: rgba(255, 255, 255, 1); // 万能色
+$NA5: rgba(255, 255, 255, 0.5); // 万能色
+$NA6: rgba(255, 255, 255, 0.3); // 万能色
 
 // 导航色
-$B1: rgba(28, 41, 60, 1); // 深色导航背景
-$B2: rgba(34, 54, 102, 1); // 深色导航背景 - 选中&Hover
+$NB1: rgba(28, 41, 60, 1); // 深色导航背景
+$NB2: rgba(34, 54, 102, 1); // 深色导航背景 - 选中&Hover
 
 // 渐变色
-$C1: linear-gradient(90deg, rgba(46, 101, 230, 1) 50%, rgba(240, 245, 255, 1) 100%); // 渐变色
+$NC1: linear-gradient(90deg, rgba(46, 101, 230, 1) 50%, rgba(240, 245, 255, 1) 100%); // 渐变色
 
 // 透明色
-$D1: rgba(29, 33, 38, 0.9); // 背景、蒙层
-$D2: rgba(29, 33, 38, 0.4); // 背景
-$D3: rgba(212, 218, 227, 0.4); // 投影
+$ND1: rgba(29, 33, 38, 0.9); // 背景、蒙层
+$ND2: rgba(29, 33, 38, 0.4); // 背景
+$ND3: rgba(212, 218, 227, 0.4); // 投影
 
 //////////// 状态色 //////////////
 // 基准色
-$E1: rgba(19, 191, 76, 1); // 辅助色（成功）
-$E2: rgba(19, 191, 76, 0.1); //辅助色（成功）
-$ET05: rgba(232, 252, 239, 1); // 辅助色（成功）
+$NE1: rgba(19, 191, 76, 1); // 辅助色（成功）
+$NE2: rgba(19, 191, 76, 0.1); //辅助色（成功）
+$NET05: rgba(232, 252, 239, 1); // 辅助色（成功）
 
-$F1: rgba(255, 147, 38, 1); // 辅助色（警示）
-$F2: rgba(255, 147, 38, 0.1); // 辅助色（警示）
-$FT05: rgba(255, 246, 235, 1); // 辅助色（警示）
+$NF1: rgba(255, 147, 38, 1); // 辅助色（警示）
+$NF2: rgba(255, 147, 38, 0.1); // 辅助色（警示）
+$NFT05: rgba(255, 246, 235, 1); // 辅助色（警示）
 
-$G1: rgba(244, 66, 66, 1); // 辅助色（失败、错误）
-$G2: rgba(244, 66, 66, 0.1); // 辅助色（失败、错误）
-$GT8: rgba(246, 103, 103, 1); // 辅助色（失败、错误）
-$GT05: rgba(255, 235, 235, 1); // 辅助色（失败、错误）
+$NG1: rgba(244, 66, 66, 1); // 辅助色（失败、错误）
+$NG2: rgba(244, 66, 66, 0.1); // 辅助色（失败、错误）
+$NGT8: rgba(246, 103, 103, 1); // 辅助色（失败、错误）
+$NGT05: rgba(255, 235, 235, 1); // 辅助色（失败、错误）
 
 // 常用
-$J1: rgba(38, 129, 255, 1);
-$K1: rgba(38, 129, 255, 0.1);
-$J2: rgba(19, 163, 191, 1);
-$K2: rgba(19, 163, 191, 0.1);
-$J3: rgba(70, 70, 230, 1);
-$K3: rgba(70, 70, 230, 0.1);
-$J4: rgba(11, 97, 217, 1);
-$K4: rgba(11, 97, 217, 0.1);
-$J5: rgba(255, 185, 0, 1);
-$K5: rgba(255, 185, 0, 0.1);
-$J6: rgba(204, 61, 204, 1);
-$K6: rgba(204, 61, 204, 0.1);
-$J7: rgba(134, 50, 245, 1);
-$K7: rgba(134, 50, 245, 0.1);
-$J8: rgba(200, 20, 15, 1);
-$K8: rgba(200, 20, 15, 0.1);
+$NJ1: rgba(38, 129, 255, 1);
+$NK1: rgba(38, 129, 255, 0.1);
+$NJ2: rgba(19, 163, 191, 1);
+$NK2: rgba(19, 163, 191, 0.1);
+$NJ3: rgba(70, 70, 230, 1);
+$NK3: rgba(70, 70, 230, 0.1);
+$NJ4: rgba(11, 97, 217, 1);
+$NK4: rgba(11, 97, 217, 0.1);
+$NJ5: rgba(255, 185, 0, 1);
+$NK5: rgba(255, 185, 0, 0.1);
+$NJ6: rgba(204, 61, 204, 1);
+$NK6: rgba(204, 61, 204, 0.1);
+$NJ7: rgba(134, 50, 245, 1);
+$NK7: rgba(134, 50, 245, 0.1);
+$NJ8: rgba(200, 20, 15, 1);
+$NK8: rgba(200, 20, 15, 0.1);
 
 // 其他
-$L1: rgba(20, 153, 255, 1);
-$M1: rgba(20, 153, 255, 0.1);
-$L2: rgba(0, 180, 170, 1);
-$M2: rgba(0, 180, 170, 0.1);
-$L3: rgba(9, 94, 179, 1);
-$M3: rgba(9, 94, 179, 0.1);
-$L4: rgba(182, 61, 242, 1);
-$M4: rgba(182, 61, 242, 0.1);
-$L5: rgba(242, 91, 61, 1);
-$M5: rgba(242, 91, 61, 0.1);
-$L6: rgba(90, 210, 0, 1);
-$M6: rgba(90, 210, 0, 0.1);
-$L7: rgba(255, 111, 38, 1);
-$M7: rgba(255, 111, 38, 0.1);
+$NL1: rgba(20, 153, 255, 1);
+$NM1: rgba(20, 153, 255, 0.1);
+$NL2: rgba(0, 180, 170, 1);
+$NM2: rgba(0, 180, 170, 0.1);
+$NL3: rgba(9, 94, 179, 1);
+$NM3: rgba(9, 94, 179, 0.1);
+$NL4: rgba(182, 61, 242, 1);
+$NM4: rgba(182, 61, 242, 0.1);
+$NL5: rgba(242, 91, 61, 1);
+$NM5: rgba(242, 91, 61, 0.1);
+$NL6: rgba(90, 210, 0, 1);
+$NM6: rgba(90, 210, 0, 0.1);
+$NL7: rgba(255, 111, 38, 1);
+$NM7: rgba(255, 111, 38, 0.1);
 
 

package/Switch/index.js

@@ -18,7 +18,7 @@ import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import '@para-ui/icons/Forbid';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/3 下午5:58\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-switch {\n  position: relative;\n  display: inline-block;\n  width: 32px;\n  height: 16px;\n  vertical-align: middle;\n  background-color: transparent;\n  border: 0;\n  cursor: pointer;\n  transition: all 0.2s;\n  user-select: none;\n}\n.paraui-v4-switch .component-switch {\n  border: none;\n  cursor: pointer;\n}\n.paraui-v4-switch:before {\n  position: absolute;\n  top: 0px;\n  left: 0;\n  width: 100%;\n  height: 16px;\n  border-radius: 8px;\n  background-color: rgb(212, 218, 227);\n  content: \"\";\n  transition: all 0.2s;\n}\na .paraui-v4-switch:focus {\n  outline: 0;\n  box-shadow: none;\n}\n.paraui-v4-switch.component-switch-checked:focus {\n  box-shadow: none;\n}\n.paraui-v4-switch:focus:hover {\n  box-shadow: none;\n}\n.paraui-v4-switch.component-switch-checked:before {\n  background-color: rgb(46, 101, 230);\n}\n.paraui-v4-switch-loading *, .paraui-v4-switch.component-switch-disabled * {\n  box-shadow: none;\n}\n.paraui-v4-switch-loading .component-switch-inner::before, .paraui-v4-switch.component-switch-disabled .component-switch-inner::before {\n  position: absolute;\n  top: 0px;\n  left: 0;\n  width: 100%;\n  height: 16px;\n  background-color: rgba(255, 255, 255, 0.5);\n  content: \"\";\n  z-index: 100;\n}\n.paraui-v4-switch .component-switch-inner {\n  display: block;\n  margin: 0 7px 0 25px;\n  font-size: 14px;\n  transition: margin 0.2s;\n}\n.paraui-v4-switch.component-switch-checked .component-switch-inner {\n  margin: 0 25px 0 7px;\n}\n.paraui-v4-switch .component-switch-handle {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 12px;\n  height: 12px;\n  transition: all 0.2s ease-in-out;\n}\n.paraui-v4-switch .component-switch-handle::before {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgb(255, 255, 255);\n  border-radius: 9px;\n  box-shadow: none;\n  transition: all 0.2s ease-in-out;\n  content: \"\";\n}\n.paraui-v4-switch.component-switch-checked .component-switch-handle {\n  left: calc(100% - 14px);\n}\n.paraui-v4-switch.component-switch-checked .component-switch-handle::before {\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v4-switch:not(.paraui-v4-switch-disabled):active .component-switch-handle::before {\n  right: -30%;\n  left: 0;\n}\n.paraui-v4-switch:not(.paraui-v4-switch-disabled):active.component-switch-checked .component-switch-handle::before {\n  right: 0;\n  left: -30%;\n}\n.paraui-v4-switch .component-switch-loading-icon {\n  position: relative;\n  top: 1px;\n  color: rgb(46, 101, 230);\n  font-size: 10px;\n  vertical-align: top;\n  animation: switchLoadingCircle 1s infinite linear;\n}\n.paraui-v4-switch.component-switch-checked .component-switch-loading-icon {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-switch-small {\n  min-width: 28px;\n  height: 14px;\n  line-height: 14px;\n}\n.paraui-v4-switch-small .component-switch-inner {\n  margin: 0 5px 0 18px;\n  font-size: 14px;\n}\n.paraui-v4-switch-small .component-switch-handle {\n  width: 12px;\n  height: 12px;\n  top: 3px;\n  left: 2px;\n}\n.paraui-v4-switch-small .component-switch-loading-icon {\n  top: 1.5px;\n  font-size: 9px;\n}\n.paraui-v4-switch-small.component-switch-checked .component-switch-inner {\n  margin: 0 18px 0 5px;\n}\n.paraui-v4-switch-small.component-switch-checked .component-switch-handle {\n  left: calc(100% - 12px - 2px);\n}\n@keyframes switchLoadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.component-label-box {\n  display: flex;\n  align-items: center;\n}\n.component-label-box .sup-text {\n  color: rgb(92, 101, 115);\n  font-size: 14px;\n  margin-left: 10px;\n  line-height: 16px;\n}\n.component-label-box .sup-text > a {\n  text-decoration: none;\n  cursor: pointer;\n  color: rgb(46, 101, 230);\n}\n\n.paraui-v4-switch-label {\n  display: inline-flex;\n  align-items: flex-end;\n}\n.paraui-v4-switch-label .component-disabled-text {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-switch-label .component-desc-text {\n  margin-bottom: 0;\n  margin-right: 10px;\n  line-height: 16px;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-switch-label .component-desc-text .paraui-v4-help {\n  line-height: 1;\n}\n.paraui-v4-switch-label .component-desc-text .paraui-v4-help svg {\n  top: 0;\n}\n.paraui-v4-switch-label .paraui-v4-label-text-container {\n  display: flex;\n  flex-direction: column;\n}\n\n.paraui-v4-switch-desc-end {\n  flex-direction: row-reverse;\n}\n.paraui-v4-switch-desc-end .component-desc-text {\n  margin-right: 0;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/3 下午5:58\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-switch {\n  position: relative;\n  display: inline-block;\n  width: 32px;\n  height: 16px;\n  vertical-align: middle;\n  background-color: transparent;\n  border: 0;\n  cursor: pointer;\n  transition: all 0.2s;\n  user-select: none;\n}\n.paraui-v4-switch .component-switch {\n  border: none;\n  cursor: pointer;\n}\n.paraui-v4-switch:before {\n  position: absolute;\n  top: 0px;\n  left: 0;\n  width: 100%;\n  height: 16px;\n  border-radius: 8px;\n  background-color: rgb(212, 218, 227);\n  content: \"\";\n  transition: all 0.2s;\n}\na .paraui-v4-switch:focus {\n  outline: 0;\n  box-shadow: none;\n}\n.paraui-v4-switch.component-switch-checked:focus {\n  box-shadow: none;\n}\n.paraui-v4-switch:focus:hover {\n  box-shadow: none;\n}\n.paraui-v4-switch.component-switch-checked:before {\n  background-color: rgb(46, 101, 230);\n}\n.paraui-v4-switch-loading *, .paraui-v4-switch.component-switch-disabled * {\n  box-shadow: none;\n}\n.paraui-v4-switch-loading .component-switch-inner::before, .paraui-v4-switch.component-switch-disabled .component-switch-inner::before {\n  position: absolute;\n  top: 0px;\n  left: 0;\n  width: 100%;\n  height: 16px;\n  background-color: rgba(255, 255, 255, 0.5);\n  content: \"\";\n  z-index: 100;\n}\n.paraui-v4-switch .component-switch-inner {\n  display: block;\n  margin: 0 7px 0 25px;\n  font-size: 14px;\n  transition: margin 0.2s;\n}\n.paraui-v4-switch.component-switch-checked .component-switch-inner {\n  margin: 0 25px 0 7px;\n}\n.paraui-v4-switch .component-switch-handle {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 12px;\n  height: 12px;\n  transition: all 0.2s ease-in-out;\n}\n.paraui-v4-switch .component-switch-handle::before {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgb(255, 255, 255);\n  border-radius: 9px;\n  box-shadow: none;\n  transition: all 0.2s ease-in-out;\n  content: \"\";\n}\n.paraui-v4-switch.component-switch-checked .component-switch-handle {\n  left: calc(100% - 14px);\n}\n.paraui-v4-switch.component-switch-checked .component-switch-handle::before {\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v4-switch:not(.paraui-v4-switch-disabled):active .component-switch-handle::before {\n  right: -30%;\n  left: 0;\n}\n.paraui-v4-switch:not(.paraui-v4-switch-disabled):active.component-switch-checked .component-switch-handle::before {\n  right: 0;\n  left: -30%;\n}\n.paraui-v4-switch .component-switch-loading-icon {\n  position: relative;\n  top: 1px;\n  color: rgb(46, 101, 230);\n  font-size: 10px;\n  vertical-align: top;\n  animation: switchLoadingCircle 1s infinite linear;\n}\n.paraui-v4-switch.component-switch-checked .component-switch-loading-icon {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-switch-small {\n  min-width: 28px;\n  height: 14px;\n  line-height: 14px;\n}\n.paraui-v4-switch-small .component-switch-inner {\n  margin: 0 5px 0 18px;\n  font-size: 14px;\n}\n.paraui-v4-switch-small .component-switch-handle {\n  width: 12px;\n  height: 12px;\n  top: 3px;\n  left: 2px;\n}\n.paraui-v4-switch-small .component-switch-loading-icon {\n  top: 1.5px;\n  font-size: 9px;\n}\n.paraui-v4-switch-small.component-switch-checked .component-switch-inner {\n  margin: 0 18px 0 5px;\n}\n.paraui-v4-switch-small.component-switch-checked .component-switch-handle {\n  left: calc(100% - 12px - 2px);\n}\n@keyframes switchLoadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.component-label-box {\n  display: flex;\n  align-items: center;\n}\n.component-label-box .sup-text {\n  color: rgb(92, 101, 115);\n  font-size: 14px;\n  margin-left: 10px;\n  line-height: 16px;\n}\n.component-label-box .sup-text > a {\n  text-decoration: none;\n  cursor: pointer;\n  color: rgb(46, 101, 230);\n}\n.component-label-box .sup-text > a:hover {\n  color: rgb(87, 131, 235);\n}\n\n.paraui-v4-switch-label {\n  display: inline-flex;\n  align-items: flex-end;\n}\n.paraui-v4-switch-label .component-disabled-text {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-switch-label .component-desc-text {\n  margin-bottom: 0;\n  margin-right: 10px;\n  line-height: 16px;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-switch-label .component-desc-text .paraui-v4-help {\n  line-height: 1;\n}\n.paraui-v4-switch-label .component-desc-text .paraui-v4-help svg {\n  top: 0;\n}\n.paraui-v4-switch-label .paraui-v4-label-text-container {\n  display: flex;\n  flex-direction: column;\n}\n\n.paraui-v4-switch-desc-end {\n  flex-direction: row-reverse;\n}\n.paraui-v4-switch-desc-end .component-desc-text {\n  margin-right: 0;\n}";
 styleInject(css_248z);
 
 //Switch 开关

package/Table/index.js

@@ -1,7 +1,7 @@
 import { _ as _typeof } from '../_verture/typeof-adeedc13.js';
 import { _ as _toConsumableArray } from '../_verture/toConsumableArray-8f4c9589.js';
 import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
-import { r as regenerator } from '../_verture/index-d63bd287.js';
+import { r as regenerator } from '../_verture/index-232d890b.js';
 import { _ as __rest, a as __awaiter } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRef, useState, useEffect, useMemo, useCallback, Fragment as Fragment$1 } from 'react';
@@ -27,7 +27,7 @@ import { Pagination } from '../Pagination/index.js';
 import { Loading } from '../Loading/index.js';
 import { u as useGlobalProps } from '../_verture/useGlobalProps-1b846a65.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
-import '../_verture/typeof-b240b062.js';
+import '../_verture/typeof-c310ee4a.js';
 import '../Tooltip/index.js';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';

package/Tabs/index.js

@@ -50,7 +50,7 @@ var localeJson = {
   en: en
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/5/30 上午10:29\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n/**\n* @author Hanz\n* @date 2022/5/30 上午10:39\n* @description\n*/\n.paraui-v4-tabs-small > .component-tabs-nav .component-tabs-tab {\n  padding: 8px 0;\n  font-size: 14px;\n}\n\n.paraui-v4-tabs-large > .component-tabs-nav .component-tabs-tab {\n  padding: 16px 0;\n  font-size: 500;\n}\n\n.paraui-v4-tabs-card.paraui-v4-tabs-small > .component-tabs-nav .component-tabs-tab {\n  padding: 6px 16px;\n}\n\n.paraui-v4-tabs-card.paraui-v4-tabs-large > .component-tabs-nav .component-tabs-tab {\n  padding: 7px 16px 6px;\n}\n\n/**\n* @author Hanz\n* @date 2022/5/30 上午10:44\n* @description\n*/\n.paraui-v4-tabs.component-tabs-top, .paraui-v4-tabs.component-tabs-bottom {\n  flex-direction: column;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav {\n  margin: 0 0 16px 0;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav::before {\n  position: absolute;\n  right: 0;\n  left: 0;\n  border-bottom: 1px solid rgb(212, 218, 227);\n  content: \"\";\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-ink-bar {\n  height: 1px;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-ink-bar-animated {\n  transition: width 0.3s, left 0.3s, right 0.3s;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  top: 0;\n  bottom: 0;\n  width: 30px;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::before {\n  left: 0;\n  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  right: 0;\n  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before {\n  opacity: 1;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after {\n  opacity: 1;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav::before {\n  bottom: 0;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-ink-bar {\n  bottom: 0;\n}\n.paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav {\n  order: 1;\n  margin-top: 16px;\n  margin-bottom: 0;\n}\n.paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav::before {\n  top: 0;\n}\n.paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-ink-bar {\n  top: 0;\n}\n.paraui-v4-tabs.component-tabs-bottom > .component-tabs-content-holder, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-content-holder {\n  order: 0;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav {\n  flex-direction: column;\n  min-width: 50px;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-tab {\n  padding: 0 12px;\n  text-align: center;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n  margin: 8px 0 0 0;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap {\n  flex-direction: column;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  right: 0;\n  left: 0;\n  height: 30px;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::before {\n  top: 0;\n  box-shadow: inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  bottom: 0;\n  box-shadow: inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before {\n  opacity: 1;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after {\n  opacity: 1;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-ink-bar {\n  width: 1px;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-ink-bar-animated {\n  transition: height 0.3s, top 0.3s;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-operations, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-operations, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-operations, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-operations {\n  flex: 1 0 auto;\n  flex-direction: column;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-ink-bar {\n  right: 0;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-content-holder, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-content-holder {\n  margin-left: -1px;\n  border-left: 1px solid #f0f0f0;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane {\n  padding-left: 24px;\n}\n.paraui-v4-tabs.component-tabs-right > .component-tabs-nav, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav {\n  order: 1;\n}\n.paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-ink-bar {\n  left: 0;\n}\n.paraui-v4-tabs.component-tabs-right > .component-tabs-content-holder, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-content-holder {\n  order: 0;\n  margin-right: -1px;\n  border-right: 1px solid #f0f0f0;\n}\n.paraui-v4-tabs.component-tabs-right > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane {\n  padding-right: 24px;\n}\n\n.component-tabs-dropdown {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  color: rgba(0, 0, 0, 0.85);\n  font-size: 14px;\n  font-variant: tabular-nums;\n  line-height: 1.5715;\n  list-style: none;\n  font-feature-settings: \"tnum\";\n  position: absolute;\n  top: -9999px;\n  left: -9999px;\n  z-index: 1050;\n  display: block;\n}\n.component-tabs-dropdown.component-tabs-dropdown-hidden {\n  display: none;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu {\n  max-height: 200px;\n  margin: 0;\n  padding: 4px 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  text-align: left;\n  list-style-type: none;\n  background-color: rgb(255, 255, 255);\n  background-clip: padding-box;\n  border-radius: 4px;\n  outline: none;\n  box-shadow: 0px 2px 8px 0px rgb(234, 236, 241);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item {\n  display: flex;\n  align-items: center;\n  min-width: 140px;\n  margin: 0;\n  padding: 7px 12px;\n  overflow: hidden;\n  color: rgb(29, 33, 38);\n  font-weight: normal;\n  font-size: 14px;\n  line-height: 30px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help {\n  display: inline-flex;\n  flex-direction: row-reverse;\n  align-items: center;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help .paraui-v4-help {\n  display: inline-flex;\n  margin-left: 4px;\n  font-size: 14px;\n  color: rgb(161, 168, 179);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help .paraui-v4-help svg {\n  color: inherit;\n  font-size: inherit;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item > span {\n  flex: 1;\n  white-space: nowrap;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-remove {\n  flex: none;\n  margin-left: 12px;\n  margin-top: 2px;\n  color: rgb(92, 101, 115);\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-remove svg {\n  color: inherit;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-remove:hover {\n  color: rgb(87, 131, 235);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item:hover {\n  background: rgb(247, 248, 250);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-disabled,\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-disabled:hover {\n  color: rgb(161, 168, 179);\n  background: transparent;\n  cursor: not-allowed;\n}\n\n.component-tabs-slide-up-enter,\n.component-tabs-slide-up-appear {\n  animation-duration: 0.2s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.component-tabs-slide-up-leave {\n  animation-duration: 0.2s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.component-tabs-slide-up-enter.component-tabs-slide-up-enter-active,\n.component-tabs-slide-up-appear.component-tabs-slide-up-appear-active {\n  animation-name: componentTabsSlideUpIn;\n  animation-play-state: running;\n}\n\n.component-tabs-slide-up-leave.component-tabs-slide-up-leave-active {\n  animation-name: componentTabsSlideUpOut;\n  animation-play-state: running;\n  pointer-events: none;\n}\n\n.component-tabs-slide-up-enter,\n.component-tabs-slide-up-appear {\n  opacity: 0;\n  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.component-tabs-slide-up-leave {\n  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n}\n\n@keyframes componentTabsSlideUpIn {\n  0% {\n    transform: scaleY(0.8);\n    transform-origin: 0% 0%;\n    opacity: 0;\n  }\n  100% {\n    transform: scaleY(1);\n    transform-origin: 0% 0%;\n    opacity: 1;\n  }\n}\n@keyframes componentTabsSlideUpOut {\n  0% {\n    transform: scaleY(1);\n    transform-origin: 0% 0%;\n    opacity: 1;\n  }\n  100% {\n    transform: scaleY(0.8);\n    transform-origin: 0% 0%;\n    opacity: 0;\n  }\n}\n.paraui-v4-tabs {\n  color: rgb(29, 33, 38);\n  font-size: 14px;\n  line-height: 1.5715;\n  display: flex;\n  background-color: rgb(255, 255, 255);\n  overflow: hidden;\n  flex-shrink: 0;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav {\n  position: relative;\n  display: flex;\n  flex: none;\n  align-items: center;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-wrap {\n  position: relative;\n  display: flex;\n  flex: auto;\n  align-self: stretch;\n  overflow: hidden;\n  white-space: nowrap;\n  transform: translate(0);\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  position: absolute;\n  z-index: 1;\n  opacity: 0;\n  transition: opacity 0.3s;\n  content: \"\";\n  pointer-events: none;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-list {\n  position: relative;\n  display: flex;\n  flex-shrink: 0;\n  transition: transform 0.3s;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-operations, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-operations {\n  display: flex;\n  align-self: stretch;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-operations-hidden, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-operations-hidden {\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more {\n  position: relative;\n  padding: 8px;\n  background: transparent;\n  border: 0;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more:hover svg, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more:hover svg {\n  color: rgb(46, 101, 230);\n  transition: all 0.3s;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more svg, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more svg {\n  font-size: 18px;\n  vertical-align: top;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more::after, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more::after {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 5px;\n  transform: translateY(100%);\n  content: \"\";\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add {\n  min-width: 40px;\n  margin-left: 2px;\n  padding: 0 8px;\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgb(212, 218, 227);\n  color: rgb(29, 33, 38);\n  outline: none;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add svg, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add svg {\n  color: inherit;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add:hover, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add:hover {\n  color: rgb(87, 131, 235);\n  border: 1px solid rgb(87, 131, 235);\n}\n.paraui-v4-tabs .component-tabs-extra-content {\n  flex: none;\n}\n.paraui-v4-tabs.paraui-v4-tabs-centered > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.paraui-v4-tabs-centered > div > .component-tabs-nav .component-tabs-nav-wrap {\n  justify-content: center;\n}\n.paraui-v4-tabs .component-tabs-ink-bar {\n  position: absolute;\n  background: rgb(46, 101, 230);\n  pointer-events: none;\n}\n.paraui-v4-tabs .component-tabs-tab {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  height: 40px;\n  padding: 0 10px;\n  font-size: 14px;\n  background: transparent;\n  border: 0;\n  outline: none;\n  cursor: pointer;\n}\n.paraui-v4-tabs .component-tabs-tab:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-tabs .component-tabs-tab-btn {\n  outline: none;\n  transition: all 0.3s;\n}\n.paraui-v4-tabs .component-tabs-tab-btn .component-tabs-tab-help {\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-tabs .component-tabs-tab-btn .component-tabs-tab-help .paraui-v4-help {\n  display: inline-flex;\n  margin-left: 4px;\n  font-size: 500;\n}\n.paraui-v4-tabs .component-tabs-tab-btn .component-tabs-tab-help .paraui-v4-help svg {\n  margin-right: 0;\n  color: inherit;\n  font-size: inherit;\n}\n.paraui-v4-tabs .component-tabs-tab-btn .paraui-v4-radio {\n  margin-right: 8px;\n}\n.paraui-v4-tabs .component-tabs-tab-remove {\n  display: inline-flex;\n  flex: none;\n  margin-right: -4px;\n  margin-left: 4px;\n  color: rgb(92, 101, 115);\n  font-size: 14px;\n  background: transparent;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n.paraui-v4-tabs .component-tabs-tab-remove:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-tabs .component-tabs-tab-remove svg {\n  color: inherit;\n  font-size: inherit;\n}\n.paraui-v4-tabs .component-tabs-tab-remove span {\n  display: inline-flex;\n}\n.paraui-v4-tabs .component-tabs-tab.component-tabs-tab-active {\n  color: rgb(46, 101, 230);\n  font-weight: 400;\n  text-shadow: 0 0 0.25px currentcolor;\n}\n.paraui-v4-tabs .component-tabs-tab.component-tabs-tab-active .component-tabs-tab-btn {\n  color: inherit;\n}\n.paraui-v4-tabs .component-tabs-tab.component-tabs-tab-disabled {\n  color: rgb(161, 168, 179);\n  cursor: not-allowed;\n}\n.paraui-v4-tabs .component-tabs-tab .component-tabs-tab-remove svg {\n  margin: 0;\n}\n.paraui-v4-tabs .component-tabs-tab svg {\n  margin-right: 12px;\n}\n.paraui-v4-tabs .component-tabs-tab + .component-tabs-tab {\n  margin: 0;\n}\n.paraui-v4-tabs .component-tabs-content {\n  display: flex;\n  width: 100%;\n}\n.paraui-v4-tabs .component-tabs-content-holder {\n  flex: auto;\n  min-width: 0;\n  min-height: 0;\n}\n.paraui-v4-tabs .component-tabs-content-animated {\n  transition: margin 0.3s;\n}\n.paraui-v4-tabs .component-tabs-tabpane {\n  flex: none;\n  width: 100%;\n  outline: none;\n}\n.paraui-v4-tabs.paraui-v4-tabs-editable-line .component-tabs-nav .component-tabs-nav-add, .paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-nav-add {\n  min-width: initial;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  align-self: center;\n  margin-left: 10px;\n  padding: 0;\n  background-color: rgb(255, 255, 255);\n  border-color: rgb(212, 218, 227);\n  border-radius: 2px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track {\n  display: inline-flex;\n  max-width: 100%;\n  border-radius: 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav {\n  height: 32px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-nav-wrap {\n  padding: 0 4px;\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-nav-add {\n  margin-right: 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav:before {\n  display: none;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-ink-bar {\n  visibility: hidden;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-tab {\n  height: 24px;\n  margin: 4px 0;\n  padding: 0 10px;\n  border-radius: 2px;\n  transition: 0.3s;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-tab.component-tabs-tab-active {\n  color: rgb(46, 101, 230);\n  text-shadow: none;\n  background-color: rgb(255, 255, 255);\n  font-weight: 400;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track.component-tabs-left .component-tabs-nav, .paraui-v4-tabs.paraui-v4-tabs-track.component-tabs-right .component-tabs-nav {\n  max-width: 200px;\n  height: auto;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track.component-tabs-left .component-tabs-content-holder, .paraui-v4-tabs.paraui-v4-tabs-track.component-tabs-right .component-tabs-content-holder {\n  border-left: 0;\n  border-right: 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane {\n  padding: 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-editable-track {\n  border-radius: 4px 0 0 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-editable-track .component-tabs-nav {\n  border-radius: 4px;\n}\n.paraui-v4-tabs.component-tabs.paraui-v4-tabs-track > .component-tabs-nav .component-tabs-nav-more {\n  background-color: rgb(247, 248, 250);\n  border-radius: 0 4px 4px 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card > div > .component-tabs-nav .component-tabs-tab {\n  margin: 0;\n  padding: 0 10px;\n  background: rgb(255, 255, 255);\n  border: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card > .component-tabs-nav .component-tabs-tab .component-tabs-tab-remove, .paraui-v4-tabs.paraui-v4-tabs-card > div > .component-tabs-nav .component-tabs-tab .component-tabs-tab-remove {\n  margin-left: 8px;\n  font-size: 14px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card > div > .component-tabs-nav .component-tabs-tab-active {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.paraui-v4-tabs-card > div > .component-tabs-nav .component-tabs-ink-bar {\n  visibility: hidden;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-bottom > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-bottom > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n  margin-left: 0;\n  border-left: 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab:first-child {\n  border-top-left-radius: 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab:nth-last-child(2) {\n  border-top-right-radius: 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > div > .component-tabs-nav .component-tabs-tab-active {\n  border-bottom-color: rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-bottom > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-bottom > div > .component-tabs-nav .component-tabs-tab-active {\n  border-top-color: rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n  margin-top: 0;\n  border-top: 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > div > .component-tabs-nav .component-tabs-tab {\n  margin-left: 0;\n  margin-top: 2px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > div > .component-tabs-nav .component-tabs-tab-active {\n  border-right-color: rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right > div > .component-tabs-nav .component-tabs-tab-active {\n  border-left-color: rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right .component-tabs-nav .component-tabs-nav-add {\n  margin-left: 0;\n  margin-top: 2px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left .component-tabs-nav .component-tabs-nav-add {\n  margin-left: 0;\n  margin-top: 2px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card-container > .component-tabs-nav:before {\n  display: none;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card-container > .component-tabs-nav .component-tabs-tab {\n  border: 0;\n  transition: 0.3s;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card-container > .component-tabs-nav .component-tabs-tab.component-tabs-tab-active {\n  border-radius: 4px 4px 0 0;\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card-container .component-tabs-content {\n  margin-top: -16px;\n  padding: 16px;\n  background-color: rgb(247, 248, 250);\n  border-radius: 0 0 4px 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-no-child:not(.paraui-v4-tabs-card-container) .component-tabs-nav {\n  margin: 0;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/5/30 上午10:29\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n/**\n* @author Hanz\n* @date 2022/5/30 上午10:39\n* @description\n*/\n.paraui-v4-tabs-small > .component-tabs-nav .component-tabs-tab {\n  padding: 8px 0;\n  font-size: 14px;\n}\n\n.paraui-v4-tabs-large > .component-tabs-nav .component-tabs-tab {\n  padding: 16px 0;\n  font-size: 16px;\n}\n\n.paraui-v4-tabs-card.paraui-v4-tabs-small > .component-tabs-nav .component-tabs-tab {\n  padding: 6px 16px;\n}\n\n.paraui-v4-tabs-card.paraui-v4-tabs-large > .component-tabs-nav .component-tabs-tab {\n  padding: 7px 16px 6px;\n}\n\n/**\n* @author Hanz\n* @date 2022/5/30 上午10:44\n* @description\n*/\n.paraui-v4-tabs.component-tabs-top, .paraui-v4-tabs.component-tabs-bottom {\n  flex-direction: column;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav {\n  margin: 0 0 16px 0;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav::before {\n  position: absolute;\n  right: 0;\n  left: 0;\n  border-bottom: 1px solid rgb(212, 218, 227);\n  content: \"\";\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-ink-bar {\n  height: 1px;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-ink-bar-animated {\n  transition: width 0.3s, left 0.3s, right 0.3s;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  top: 0;\n  bottom: 0;\n  width: 30px;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::before {\n  left: 0;\n  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  right: 0;\n  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before {\n  opacity: 1;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after {\n  opacity: 1;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav::before {\n  bottom: 0;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-ink-bar {\n  bottom: 0;\n}\n.paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav {\n  order: 1;\n  margin-top: 16px;\n  margin-bottom: 0;\n}\n.paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav::before {\n  top: 0;\n}\n.paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-ink-bar {\n  top: 0;\n}\n.paraui-v4-tabs.component-tabs-bottom > .component-tabs-content-holder, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-content-holder {\n  order: 0;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav {\n  flex-direction: column;\n  min-width: 50px;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-tab {\n  padding: 0 12px;\n  text-align: center;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n  margin: 8px 0 0 0;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap {\n  flex-direction: column;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  right: 0;\n  left: 0;\n  height: 30px;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::before {\n  top: 0;\n  box-shadow: inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  bottom: 0;\n  box-shadow: inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before {\n  opacity: 1;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after {\n  opacity: 1;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-ink-bar {\n  width: 1px;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-ink-bar-animated {\n  transition: height 0.3s, top 0.3s;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-operations, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-operations, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-operations, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-operations {\n  flex: 1 0 auto;\n  flex-direction: column;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-ink-bar {\n  right: 0;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-content-holder, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-content-holder {\n  margin-left: -1px;\n  border-left: 1px solid #f0f0f0;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane {\n  padding-left: 24px;\n}\n.paraui-v4-tabs.component-tabs-right > .component-tabs-nav, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav {\n  order: 1;\n}\n.paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-ink-bar {\n  left: 0;\n}\n.paraui-v4-tabs.component-tabs-right > .component-tabs-content-holder, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-content-holder {\n  order: 0;\n  margin-right: -1px;\n  border-right: 1px solid #f0f0f0;\n}\n.paraui-v4-tabs.component-tabs-right > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane {\n  padding-right: 24px;\n}\n\n.component-tabs-dropdown {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  color: rgba(0, 0, 0, 0.85);\n  font-size: 14px;\n  font-variant: tabular-nums;\n  line-height: 1.5715;\n  list-style: none;\n  font-feature-settings: \"tnum\";\n  position: absolute;\n  top: -9999px;\n  left: -9999px;\n  z-index: 1050;\n  display: block;\n}\n.component-tabs-dropdown.component-tabs-dropdown-hidden {\n  display: none;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu {\n  max-height: 200px;\n  margin: 0;\n  padding: 4px 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  text-align: left;\n  list-style-type: none;\n  background-color: rgb(255, 255, 255);\n  background-clip: padding-box;\n  border-radius: 4px;\n  outline: none;\n  box-shadow: 0px 2px 8px 0px rgb(234, 236, 241);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item {\n  display: flex;\n  align-items: center;\n  min-width: 140px;\n  margin: 0;\n  padding: 7px 12px;\n  overflow: hidden;\n  color: rgb(29, 33, 38);\n  font-weight: normal;\n  font-size: 14px;\n  line-height: 30px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help {\n  display: inline-flex;\n  flex-direction: row-reverse;\n  align-items: center;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help .paraui-v4-help {\n  display: inline-flex;\n  margin-left: 4px;\n  font-size: 14px;\n  color: rgb(161, 168, 179);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help .paraui-v4-help svg {\n  color: inherit;\n  font-size: inherit;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item > span {\n  flex: 1;\n  white-space: nowrap;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-remove {\n  flex: none;\n  margin-left: 12px;\n  margin-top: 2px;\n  color: rgb(92, 101, 115);\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-remove svg {\n  color: inherit;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-remove:hover {\n  color: rgb(87, 131, 235);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item:hover {\n  background: rgb(247, 248, 250);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-disabled,\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-disabled:hover {\n  color: rgb(161, 168, 179);\n  background: transparent;\n  cursor: not-allowed;\n}\n\n.component-tabs-slide-up-enter,\n.component-tabs-slide-up-appear {\n  animation-duration: 0.2s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.component-tabs-slide-up-leave {\n  animation-duration: 0.2s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.component-tabs-slide-up-enter.component-tabs-slide-up-enter-active,\n.component-tabs-slide-up-appear.component-tabs-slide-up-appear-active {\n  animation-name: componentTabsSlideUpIn;\n  animation-play-state: running;\n}\n\n.component-tabs-slide-up-leave.component-tabs-slide-up-leave-active {\n  animation-name: componentTabsSlideUpOut;\n  animation-play-state: running;\n  pointer-events: none;\n}\n\n.component-tabs-slide-up-enter,\n.component-tabs-slide-up-appear {\n  opacity: 0;\n  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.component-tabs-slide-up-leave {\n  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n}\n\n@keyframes componentTabsSlideUpIn {\n  0% {\n    transform: scaleY(0.8);\n    transform-origin: 0% 0%;\n    opacity: 0;\n  }\n  100% {\n    transform: scaleY(1);\n    transform-origin: 0% 0%;\n    opacity: 1;\n  }\n}\n@keyframes componentTabsSlideUpOut {\n  0% {\n    transform: scaleY(1);\n    transform-origin: 0% 0%;\n    opacity: 1;\n  }\n  100% {\n    transform: scaleY(0.8);\n    transform-origin: 0% 0%;\n    opacity: 0;\n  }\n}\n.paraui-v4-tabs {\n  color: rgb(29, 33, 38);\n  font-size: 14px;\n  line-height: 1.5715;\n  display: flex;\n  background-color: rgb(255, 255, 255);\n  overflow: hidden;\n  flex-shrink: 0;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav {\n  position: relative;\n  display: flex;\n  flex: none;\n  align-items: center;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-wrap {\n  position: relative;\n  display: flex;\n  flex: auto;\n  align-self: stretch;\n  overflow: hidden;\n  white-space: nowrap;\n  transform: translate(0);\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  position: absolute;\n  z-index: 1;\n  opacity: 0;\n  transition: opacity 0.3s;\n  content: \"\";\n  pointer-events: none;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-list {\n  position: relative;\n  display: flex;\n  flex-shrink: 0;\n  transition: transform 0.3s;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-operations, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-operations {\n  display: flex;\n  align-self: stretch;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-operations-hidden, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-operations-hidden {\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more {\n  position: relative;\n  padding: 8px;\n  background: transparent;\n  border: 0;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more:hover svg, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more:hover svg {\n  color: rgb(46, 101, 230);\n  transition: all 0.3s;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more svg, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more svg {\n  font-size: 18px;\n  vertical-align: top;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more::after, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more::after {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 5px;\n  transform: translateY(100%);\n  content: \"\";\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add {\n  min-width: 40px;\n  margin-left: 2px;\n  padding: 0 8px;\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgb(212, 218, 227);\n  color: rgb(29, 33, 38);\n  outline: none;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add svg, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add svg {\n  color: inherit;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add:hover, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add:hover {\n  color: rgb(87, 131, 235);\n  border: 1px solid rgb(87, 131, 235);\n}\n.paraui-v4-tabs .component-tabs-extra-content {\n  flex: none;\n}\n.paraui-v4-tabs.paraui-v4-tabs-centered > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.paraui-v4-tabs-centered > div > .component-tabs-nav .component-tabs-nav-wrap {\n  justify-content: center;\n}\n.paraui-v4-tabs .component-tabs-ink-bar {\n  position: absolute;\n  background: rgb(46, 101, 230);\n  pointer-events: none;\n}\n.paraui-v4-tabs .component-tabs-tab {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  height: 40px;\n  padding: 0 10px;\n  font-size: 14px;\n  background: transparent;\n  border: 0;\n  outline: none;\n  cursor: pointer;\n}\n.paraui-v4-tabs .component-tabs-tab:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-tabs .component-tabs-tab-btn {\n  outline: none;\n  transition: all 0.3s;\n}\n.paraui-v4-tabs .component-tabs-tab-btn .component-tabs-tab-help {\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-tabs .component-tabs-tab-btn .component-tabs-tab-help .paraui-v4-help {\n  display: inline-flex;\n  margin-left: 4px;\n  font-size: 16px;\n}\n.paraui-v4-tabs .component-tabs-tab-btn .component-tabs-tab-help .paraui-v4-help svg {\n  margin-right: 0;\n  color: inherit;\n  font-size: inherit;\n}\n.paraui-v4-tabs .component-tabs-tab-btn .paraui-v4-radio {\n  margin-right: 8px;\n}\n.paraui-v4-tabs .component-tabs-tab-remove {\n  display: inline-flex;\n  flex: none;\n  margin-right: -4px;\n  margin-left: 4px;\n  color: rgb(92, 101, 115);\n  font-size: 14px;\n  background: transparent;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n.paraui-v4-tabs .component-tabs-tab-remove:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-tabs .component-tabs-tab-remove svg {\n  color: inherit;\n  font-size: inherit;\n}\n.paraui-v4-tabs .component-tabs-tab-remove span {\n  display: inline-flex;\n}\n.paraui-v4-tabs .component-tabs-tab.component-tabs-tab-active {\n  color: rgb(46, 101, 230);\n  font-weight: 400;\n  text-shadow: 0 0 0.25px currentcolor;\n}\n.paraui-v4-tabs .component-tabs-tab.component-tabs-tab-active .component-tabs-tab-btn {\n  color: inherit;\n}\n.paraui-v4-tabs .component-tabs-tab.component-tabs-tab-disabled {\n  color: rgb(161, 168, 179);\n  cursor: not-allowed;\n}\n.paraui-v4-tabs .component-tabs-tab .component-tabs-tab-remove svg {\n  margin: 0;\n}\n.paraui-v4-tabs .component-tabs-tab svg {\n  margin-right: 12px;\n}\n.paraui-v4-tabs .component-tabs-tab + .component-tabs-tab {\n  margin: 0;\n}\n.paraui-v4-tabs .component-tabs-content {\n  display: flex;\n  width: 100%;\n}\n.paraui-v4-tabs .component-tabs-content-holder {\n  flex: auto;\n  min-width: 0;\n  min-height: 0;\n}\n.paraui-v4-tabs .component-tabs-content-animated {\n  transition: margin 0.3s;\n}\n.paraui-v4-tabs .component-tabs-tabpane {\n  flex: none;\n  width: 100%;\n  outline: none;\n}\n.paraui-v4-tabs.paraui-v4-tabs-editable-line .component-tabs-nav .component-tabs-nav-add, .paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-nav-add {\n  min-width: initial;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  align-self: center;\n  margin-left: 10px;\n  padding: 0;\n  background-color: rgb(255, 255, 255);\n  border-color: rgb(212, 218, 227);\n  border-radius: 2px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track {\n  display: inline-flex;\n  max-width: 100%;\n  border-radius: 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav {\n  height: 32px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-nav-wrap {\n  padding: 0 4px;\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-nav-add {\n  margin-right: 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav:before {\n  display: none;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-ink-bar {\n  visibility: hidden;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-tab {\n  height: 24px;\n  margin: 4px 0;\n  padding: 0 10px;\n  border-radius: 2px;\n  transition: 0.3s;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-tab.component-tabs-tab-active {\n  color: rgb(46, 101, 230);\n  text-shadow: none;\n  background-color: rgb(255, 255, 255);\n  font-weight: 400;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track.component-tabs-left .component-tabs-nav, .paraui-v4-tabs.paraui-v4-tabs-track.component-tabs-right .component-tabs-nav {\n  max-width: 200px;\n  height: auto;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track.component-tabs-left .component-tabs-content-holder, .paraui-v4-tabs.paraui-v4-tabs-track.component-tabs-right .component-tabs-content-holder {\n  border-left: 0;\n  border-right: 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane {\n  padding: 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-editable-track {\n  border-radius: 4px 0 0 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-editable-track .component-tabs-nav {\n  border-radius: 4px;\n}\n.paraui-v4-tabs.component-tabs.paraui-v4-tabs-track > .component-tabs-nav .component-tabs-nav-more {\n  background-color: rgb(247, 248, 250);\n  border-radius: 0 4px 4px 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card > div > .component-tabs-nav .component-tabs-tab {\n  margin: 0;\n  padding: 0 10px;\n  background: rgb(255, 255, 255);\n  border: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card > .component-tabs-nav .component-tabs-tab .component-tabs-tab-remove, .paraui-v4-tabs.paraui-v4-tabs-card > div > .component-tabs-nav .component-tabs-tab .component-tabs-tab-remove {\n  margin-left: 8px;\n  font-size: 14px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card > div > .component-tabs-nav .component-tabs-tab-active {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.paraui-v4-tabs-card > div > .component-tabs-nav .component-tabs-ink-bar {\n  visibility: hidden;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-bottom > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-bottom > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n  margin-left: 0;\n  border-left: 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab:first-child {\n  border-top-left-radius: 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab:nth-last-child(2) {\n  border-top-right-radius: 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > div > .component-tabs-nav .component-tabs-tab-active {\n  border-bottom-color: rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-bottom > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-bottom > div > .component-tabs-nav .component-tabs-tab-active {\n  border-top-color: rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n  margin-top: 0;\n  border-top: 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > div > .component-tabs-nav .component-tabs-tab {\n  margin-left: 0;\n  margin-top: 2px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > div > .component-tabs-nav .component-tabs-tab-active {\n  border-right-color: rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right > div > .component-tabs-nav .component-tabs-tab-active {\n  border-left-color: rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right .component-tabs-nav .component-tabs-nav-add {\n  margin-left: 0;\n  margin-top: 2px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left .component-tabs-nav .component-tabs-nav-add {\n  margin-left: 0;\n  margin-top: 2px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card-container > .component-tabs-nav:before {\n  display: none;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card-container > .component-tabs-nav .component-tabs-tab {\n  border: 0;\n  transition: 0.3s;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card-container > .component-tabs-nav .component-tabs-tab.component-tabs-tab-active {\n  border-radius: 4px 4px 0 0;\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card-container .component-tabs-content {\n  margin-top: -16px;\n  padding: 16px;\n  background-color: rgb(247, 248, 250);\n  border-radius: 0 0 4px 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-no-child:not(.paraui-v4-tabs-card-container) .component-tabs-nav {\n  margin: 0;\n}";
 styleInject(css_248z);
 
 //tabs