/**新的UI标准样式-------------------------------------start**/
/*标题文字*/
.xx-font-H1{font-size: 24px;line-height: 34px;font-weight: 600;}
.xx-font-H2{font-size: 20px;line-height: 30px;font-weight: 600;}
.xx-font-H2-1{font-size: 18px;line-height: 28px;font-weight: 600;}
.xx-font-H3{font-size: 16px;line-height: 26px;font-weight: 600;}
.xx-font-H4{font-size: 14px;line-height: 22px;font-weight: 600;}
/*正文文字*/
.xx-font-T1-1{font-size: 18px;line-height: 28px;font-weight: 400;}
.xx-font-T1{font-size: 16px;line-height: 26px;font-weight: 400;}
.xx-font-T2{font-size: 14px;line-height: 22px;font-weight: 400;}
.xx-font-T3{font-size: 12px;line-height: 20px;font-weight: 400;}
.xx-font-T3-B{font-size: 12px;line-height: 20px;font-weight: 600;}
.xx-font-T4{font-size: 11px;line-height: 13px;}
.xx-font-T5{font-size: 10px;line-height: 12px;}
/*大字号文字*/
.xx-font-B1{font-size: 56px;line-height: 64px;font-weight: 400;}
.xx-font-B2{font-size: 46px;line-height: 52px;font-weight: 400;}
.xx-font-B3{font-size: 36px;line-height: 48px;font-weight: 400;}

/* --- 文字颜色 --- */
.xx-color-text-theme{
    color: var(--color-text-theme);
}
.xx-color-text-1{
    color: var(--color-text-1);
}
.xx-color-text-2{
    color: var(--color-text-2);
}
.xx-color-text-3{
    color: var(--color-text-3);
}
.xx-color-text-4{
    color: var(--color-text-4);
}
.xx-color-red{
    color: var(--error-1);
}
.xx-color-green{
    color: var(--green-1);
}
.xx-color-yellow{
    color: var(--yellow-1);
}
/* --- 文字大小 --- */
.xx-fontsize-tiny{
    font-size:var(--fontsize-tiny);
}
.xx-fontsize-mini{
    font-size:var(--fontsize-mini);
}
.xx-fontsize-small{
    font-size: var(--fontsize-small);
}
.xx-fontsize-medium{
    font-size: var(--fontsize-medium);
}
.xx-fontsize-large{
    font-size: var(--fontsize-large);
}
.xx-list-item{
    /*所有的列表都需要增加这个class*/
}
.xx-list-item.is-active{
    background: var(--secondary-2);
}
.xx-list-item:hover{
    background: var(--color-hover);
}
.margin-4      { margin: 4px; }
.margin-8      { margin: 8px; }
.margin-12     { margin: 12px; }
.margin-16     { margin: 16px; }
.margin-20     { margin: 20px; }
.margin-24     { margin: 24px; }
.margin-32     { margin: 32px; }

.margin-left-4  { margin-left: 4px; }
.margin-left-8  { margin-left: 8px; }
.margin-left-12 { margin-left: 12px; }
.margin-left-16 { margin-left: 16px; }
.margin-left-20 { margin-left: 20px; }
.margin-left-24 { margin-left: 24px; }
.margin-left-32 { margin-left: 32px; }

.margin-right-4  { margin-right: 4px; }
.margin-right-8  { margin-right: 8px; }
.margin-right-12 { margin-right: 12px; }
.margin-right-16 { margin-right: 16px; }
.margin-right-20 { margin-right: 20px; }
.margin-right-24 { margin-right: 24px; }
.margin-right-32 { margin-right: 32px; }

.margin-top-4  { margin-top: 4px; }
.margin-top-8  { margin-top: 8px; }
.margin-top-12 { margin-top: 12px; }
.margin-top-16 { margin-top: 16px; }
.margin-top-20 { margin-top: 20px; }
.margin-top-24 { margin-top: 24px; }
.margin-top-32 { margin-top: 32px; }

.margin-bottom-4  { margin-bottom: 4px; }
.margin-bottom-8  { margin-bottom: 8px; }
.margin-bottom-12 { margin-bottom: 12px; }
.margin-bottom-16 { margin-bottom: 16px; }
.margin-bottom-20 { margin-bottom: 20px; }
.margin-bottom-24 { margin-bottom: 24px; }
.margin-bottom-32 { margin-bottom: 32px; }

.padding-4      { padding: 4px; }
.padding-8      { padding: 8px; }
.padding-12     { padding: 12px; }
.padding-16     { padding: 16px; }
.padding-20     { padding: 20px; }
.padding-24     { padding: 24px; }

.padding-left-4  { padding-left: 4px; }
.padding-left-8  { padding-left: 8px; }
.padding-left-12 { padding-left: 12px; }
.padding-left-16 { padding-left: 16px; }
.padding-left-20 { padding-left: 20px; }
.padding-left-24 { padding-left: 24px; }

.padding-right-4  { padding-right: 4px; }
.padding-right-8  { padding-right: 8px; }
.padding-right-12 { padding-right: 12px; }
.padding-right-16 { padding-right: 16px; }
.padding-right-20 { padding-right: 20px; }
.padding-right-24 { padding-right: 24px; }

.padding-top-4  { padding-top: 4px; }
.padding-top-8  { padding-top: 8px; }
.padding-top-12 { padding-top: 12px; }
.padding-top-16 { padding-top: 16px; }
.padding-top-20 { padding-top: 20px; }
.padding-top-24 { padding-top: 24px; }

.padding-bottom-4  { padding-bottom: 4px; }
.padding-bottom-8  { padding-bottom: 8px; }
.padding-bottom-12 { padding-bottom: 12px; }
.padding-bottom-16 { padding-bottom: 16px; }
.padding-bottom-20 { padding-bottom: 20px; }
.padding-bottom-24 { padding-bottom: 24px; }


.gap-0{ gap:var(--spacing-0)}
.gap-2{ gap:2px}
.gap-4{ gap:var(--spacing-mini)}
.gap-6{ gap:6px}
.gap-8{ gap:var(--spacing-small)}
.gap-8-row{ gap:var(--spacing-small) 0}
.gap-12{ gap:var(--spacing-medium)}
.gap-16{ gap:var(--spacing-large)}
.gap-24{ gap: 24px}

/* ===== 全局滚动条样式 ===== */
/* Webkit 浏览器（Chrome, Safari, Edge） */
*::-webkit-scrollbar        { width: 8px; height: 8px; }
*::-webkit-scrollbar-track  { background: transparent; }
*::-webkit-scrollbar-thumb   { background: transparent; border-radius: 4px; transition: background 0.3s ease; }
/* 鼠标悬停时显示滚动条 */
*:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); }
*::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.5); }
/* Firefox */
*       { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: rgba(0, 0, 0, 0.3) transparent; }

.xx-popper {background: var(--color-fill-1)!important;border-radius: 16px;}
.xx-popper .popper__arrow{display: none;}
.xx-popper[x-placement^=bottom]{margin-top: 8px;}
.xx-popper.el-picker-panel[x-placement^=bottom]{margin-top: -4px;}
.xx-popper.el-picker-panel.small[x-placement^=bottom]{margin-top: 4px;}

/* xx-popper 滚动条一直显示 */
.xx-popper::-webkit-scrollbar-thumb,
.xx-popper *::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);

}
.xx-popper::-webkit-scrollbar-thumb:hover,
.xx-popper *::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}
.xx-popper, .xx-popper * {
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

/* z-filter 筛选组件样式 */
.xx-popper .multipleSelect{
    min-width: 100px;
}
.z-filter-trigger {
    display: inline-flex;
    align-items: center;
    padding: 0px 16px;
    border-radius: 100px;
    transition: background-color 0.2s ease;
}
.z-filter-trigger.z-filter-bg {
    background-color: var(--color-fill-2);
}
.z-filter-trigger.z-filter-active{
    background-color: #DCE0E4;
}
.z-filter-trigger.is-selected{
    background-color: var(--primary-2);
}

/* z-filter-date-picker 弹出层样式 */
.el-date-picker {
    background-color: var(--color-fill-1) !important;
    background: var(--color-fill-1) !important;
    border-radius: var(--radius-large) !important;
    border: none !important;
}
.xx-popper .el-picker-panel .popper__arrow {
    display: none !important;
}
.xx-popper .el-picker-panel__sidebar{
    background-color: var(--color-fill-1) !important;
    border-radius: var(--radius-large) 0 0  var(--radius-large)!important;
}
.z-term-sidebar__year{
    color: var(--color-text-3);
    padding: 4px;
    font-size: 12px;
}
.z-term-sidebar__term{
    color: var(--color-text-1);
    padding: 4px 8px;
    border-radius: var(--radius-mini);
    cursor: pointer;
}
.z-term-sidebar__term:hover {
    background-color: var(--color-hover);
}
.z-term-sidebar__divider{
    height: 1px;
    margin: 4px;
    background-color: var(--color-border--3);
}
.z-term-sidebar__toggle{
    cursor: pointer;
    color: var(--color-text-theme);
    width: fit-content;
    margin: 4px 8px;
}

/* z-filter-single 下拉菜单样式 */
.z-filter-single-dropdown.el-dropdown-menu {
    border-radius: var(--radius-large) !important;
    background: var(--color-fill-1);
    min-width: 120px;
    padding: 8px 4px;
}
.z-filter-single-dropdown .el-dropdown-menu__item {
    color: var(--color-text-1);
    border-radius: 12px;
    padding: 12px 8px;
    line-height: 24px;
}
.z-filter-single-dropdown .el-dropdown-menu__item:hover {
    background: rgba(0, 0, 0, 0.08)!important;
    color: var(--color-text-1)!important;
}

/* z-filter-date-picker 日期选择器样式 */
.xx-popper .el-date-range-picker__header div{
    color: var(--color-text-1) !important;
    font-weight: bold!important;
    font-size: var(--fontsize-small)!important;
}
.xx-popper .el-picker-panel__sidebar{
    padding: 8px!important;
}
.xx-popper .el-picker-panel__sidebar .el-picker-panel__shortcut{
    height: 40px;
    line-height: 40px;
    color: #192024;
}
.xx-popper .el-picker-panel__sidebar .el-picker-panel__shortcut:hover{
    background-color: var(--primary-2);
    border-radius: var(--radius-small);
}
.xx-popper table{
    color: var(--color-text-1);
    font-size: var(--fontsize-small);
}
.xx-popper .el-date-range-picker__content{
    padding: 16px 24px;
}
.xx-popper .el-date-table td{
    width: 32px;
    height: 32px;
}
.xx-popper .el-date-table td, .el-date-table td div{
    height: 32px;
}
.xx-popper .el-date-table td span{
    width: 32px;
    height: 32px;
    line-height: 32px;
    margin-top: -3px;
}
/**新的UI标准样式-------------------------------------end**/

/* ===== 按钮 ===== */
.el-button--primary.is-active, .el-button--primary:active{
    background: var(--primary-1) !important;
    border-color: var(--primary-1) !important;
}
.blue-text:hover{
    color: var(--primary-1);
}
.el-button--primary.is-plain {
    color: var(--primary-1) !important;
    background-color: var(--primary-2) !important;
    border-color: var(--primary-4) !important;
}
.el-button--primary.is-plain:hover,
.el-button--primary.is-plain:focus {
    background-color: var(--primary-1) !important;
    border-color: var(--primary-1) !important;
    color: #fff !important;
}
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:hover,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:active {
    background-color: var(--primary-4) !important;
    border-color: var(--primary-4) !important;
}
/* 文字按钮 */
.el-button--text {
    color: var(--primary-1) ;
}
.el-button--text:hover,
.el-button--text:focus {
    color: var(--primary-5) ;
}
/* ===== 头像 ===== */
.el-avatar{
    background: var(--primary-1) !important;
}
/* ===== 日期选择器 ===== */
.el-date-table td.in-range div,
.el-date-table td.in-range div:hover {
    background-color: var(--primary-2) !important;
}
.el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {
    background-color: var(--primary-2);
}
/* ===== tag标签 ===== */
.el-tag {
    background-color: var(--primary-2);
    border-color: var(--primary-4);
}



.spacing-small-left{
    margin-left: var(--spacing-small) !important;
}
.spacing-large-left{
    margin-left: var(--spacing-large) !important;
}
.spacing-small-right{
    margin-right: var(--spacing-small) !important;
}
.spacing-large-right{
    margin-right: var(--spacing-large) !important;
}
.spacing-small-top{
    margin-top: var(--spacing-small) !important;
}
.spacing-large-top{
    margin-top: var(--spacing-large) !important;
}
.spacing-small-bottom{
    margin-bottom: var(--spacing-small) !important;
}
.spacing-large-bottom{
    margin-bottom: var(--spacing-large) !important;
}
.flex-shrink-0 {
    flex-shrink: 0;
}
/*这个是因为span标签在系统中受到影响导致tag组件在系统中显示的文字没有居中特意加的*/
.xx-tag__content-inner{
    margin-top: -1px;
}
.x-dialog{
    background-color: var(--color-fill-1);
    border-radius: 16px;
    box-shadow: var(--shadow-level-1);
}
.x-dialog .el-dialog__header{
    padding: 24px 24px 0 !important;
}
.x-dialog .el-dialog__body{
    padding: 0 24px!important;
}
.el-dropdown-m3{
    min-width: 200px;
    background-color: var(--color-fill-2);
    border-radius: 4px;
    box-shadow: var(--shadow-level-1);
    padding: 8px 0;
}
.el-dropdown-m3 .el-dropdown-menu__item{
    width: 100%;
    padding: 12px;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-1);
}
.el-dropdown-m3 .el-dropdown-menu__item:hover{
    background: var(--color-hover) !important;
    color: var(--color-text-1) !important;
}