body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}


/* Default layout for larger screens */
.responsive-splitter {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.responsive-panel {
  flex: 1; /* Ensure panels share space evenly */
  min-width: 0; /* Prevent overflow */
}

/* Responsive layout for smaller screens */
@media (max-width: 768px) {
  .responsive-splitter {
    flex-direction: column; /* Stack panels vertically */
  }

  .responsive-panel {
    width: 100%; /* Full width for mobile */
  }
}

:root {
  --primary: #3b2f22;
  --secondary: #685642;
  --epac_green: #539d52;
  --epac_green_2: #61bf5f;
  --epac_red: #c7010e;
  --epac_gray: #b3b3b3;
  --epac_gray_2: #7c7c7c;
  --accent: #FFC13B;
  --accent_light: #fff5cb;
  --white: #fff;
  --sub_red: #ffcfd2;
}

.w-100 {
  width: 100%;
}

.w-90 {
  width: 90%;
}

.w-80 {
  width: 80%;
}

.w-70 {
  width: 70%;
}

.w-60 {
  width: 60%;
}

.w-50 {
  width: 50%;
}

.w-40 {
  width: 40%;
}

.w-30 {
  width: 30%;
}

.w-20 {
  width: 20%;
}

.w-10 {
  width: 10%;
}

.w-0 {
  width: 0%;
}

.hover-underline:hover{
  text-decoration: underline!important;
}

.text-right input {
  text-align: right!important;
}

.text-center input {
  text-align: center!important;
}

.text-left input {
  text-align: left!important;
}

/* button */
button {
  font-weight: bold!important;
}

.btn-with-input {
  padding: 8px;
  border-radius: 3px;
  cursor: pointer;
}

.btn-with-input:hover {
  background-color: #cbcbcb;
}

button:disabled{
  cursor: not-allowed!important;
  border-color: #d9d9d9!important;
  color: rgba(0, 0, 0, 0.25)!important;
  background: rgba(0, 0, 0, 0.04)!important;
  box-shadow: none!important;
}

.btn-refresh{
  background-color: var(--secondary)!important;
  border-color: var(--secondary)!important;
  color: white!important;
}

.btn-refresh:hover{
  background-color: var(--secondary)!important;
  border-color: var(--secondary)!important;
}

.btn-epac_green_2{
  background-color: var(--epac_green_2)!important;
  border-color: var(--epac_green_2)!important;
  color: white!important;
}

.btn-epac_green_2:hover{
  background-color: var(--epac_green)!important;
  border-color: var(--epac_green)!important;
}

.btn-secondary{
  background-color: var(--secondary)!important;
  border-color: var(--secondary)!important;
  color: white!important;
}

.btn-secondary:hover{
  background-color: var(--secondary)!important;
  border-color: var(--secondary)!important;
}

.btn-secondary-outline{
  background-color: var(--white)!important;
  border-color: var(--secondary)!important;
  color: var(--secondary)!important;
  border-width: 1px;
}

.btn-secondary-outline:hover{
  background-color: var(--white)!important;
  border-color: var(--secondary)!important;
}

.btn-text-outline{
  background-color: none!important;
  border-color: none!important;
  color: var(--epac_green)!important;
  border-width: 1px;
  padding: 0 8px;
}

.btn-text-outline:hover{
  background-color: #fff!important;
  border-color: 1px solid var(--epac_green)!important;
}

.btn-default-outline{
  border-color: #d9d9d9!important;
  background: #ffffff!important;
}
.btn-default-outline:hover,.btn-default-outline:active{
color: #140f0b!important;
border-color: #140f0b!important;
}


.ant-btn-primary, .btn-epac_green {
  background-color: var(--epac_green) !important;
  border-color: var(--epac_green) !important;
  color: white !important;
}

.ant-btn-primary:hover,.btn-epac_green:hover {
  background-color: #397d38 !important;
  border-color:  #397d38 !important;
}

.btn-card-title {
  background-color: transparent !important;
  border-color: var(--secondary) !important;
  color: var(--secondary) !important;
  font-weight: bold !important;
  border-radius: 35px;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 12px;
}

.btn-card-title:hover {
  background-color: var(--secondary) !important;
  color: white !important;
  border-color: var(--secondary) !important;
}

/* Tabs */
.auth-tabs .ant-tabs-tab {
    font-size: 18px;
    font-weight: bold;
  }
  
.ant-tabs-ink-bar {
  height: 4px !important; /* 调整 inkBar 高度 */
}

/* 默认（未选中）Tab 颜色 */
.ant-tabs-tab {
  padding: 12px 24px !important;
  color: var(--epac_gray) !important; /* 修改未选中 Tab 颜色 */
}

.auth-tabs .ant-tabs-tab {
  width: 100%;
  max-width: fit-content;
  padding: 12px 30px !important;
  color: var(--epac_gray) !important; /* 修改未选中 Tab 颜色 */
}

/* 选中（active）Tab 颜色 */
.ant-tabs-tab.ant-tabs-tab-active {
  color: #3b2f22 !important; /* 选中 Tab 颜色 */
  font-weight: bold; /* 让选中 Tab 更明显 */
}
/*  */

/* Selection */
/* 调整 Select 下拉菜单的宽度 */
.ant-select-dropdown {
  max-width: 100% !important;  /* 让下拉菜单的最大宽度适应父容器 */
  white-space: nowrap;
  overflow-x: auto; /* 如果内容过长，允许横向滚动 */
}

/* 防止项内容被截断 */
/* 强制设置 Select 的下拉菜单最大宽度为超出父容器 */
.ant-select-dropdown {
  width: auto !important; /* 确保下拉菜单宽度不受父容器限制 */
  min-width: 300px !important; /* 设置下拉菜单的最小宽度 */
  max-width: none !important; /* 取消最大宽度限制 */
  white-space: nowrap;
  overflow-x: auto; /* 如果内容超出，允许横向滚动 */
}

/* 防止下拉项内容被截断 */
.ant-select-item-option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* input */
.ant-input-prefix {
  padding-right: 10px !important;
  min-width: 26px;
  color: var(--primary);
}

.ant-input {
  /* padding: 2px 2px !important; */
}

.ant-input:focus,
.ant-input-focused {
  box-shadow: 0 0 3px #b3b3b39e !important; /* 添加蓝色阴影 */
}

.ant-form-item-label label{
  font-weight: 700 !important;
}
/* Form */
.form-footer-sticky {
  padding: 12px 0;
  position: sticky !important;
  bottom: 0 !important;
  background-color: #fff; /* Optional, for better visibility */
  z-index: 10; /* Make sure it stays on top */
  border-top: #f0f0f0 solid 2px;
  margin-top: 25px;
}

.form-primary-btn {
  min-width: 150px;
}

/* readonly Form */
/* 隐藏 readonly 表单中的 placeholder */
.form-readonly-mode input::placeholder,
.form-readonly-mode .ant-input-password::placeholder
input:disabled, .form-readonly-mode .ant-form-item-control-input, .form-readonly-mode .ant-form-item-control-input *
{
    visibility: hidden !important; /* 隐藏 placeholder */
    pointer-events: none!important;
}

/* 防止 readonly 的输入框背景与默认背景一样 */
.form-readonly-mode input,
.form-readonly-mode .ant-input-password,
input:disabled, .form-readonly-mode .ant-form-item-control-input, .form-readonly-mode .ant-form-item-control-input * {
    color: #000!important;
    background-color: #f5f5f5 !important; /* 更淡的背景 */
    cursor: default !important;
    border-color: #d9d9d9 !important;
    cursor: not-allowed!important;
    pointer-events: none!important;
}

/* 禁用密码可见性切换按钮 */
.form-readonly-mode .ant-input-password-icon {
    display: none !important; /* 隐藏密码切换图标 */
    pointer-events: none!important;
}


/* when error */
.ant-input-status-error .ant-input-prefix {
  color: var(--epac_red) !important; /* 让 prefix 变成蓝色 */
}
.ant-form-item-explain-error {
  color: var(--epac_red) !important; /* 改变错误提示颜色 */
  text-align: center !important;
  padding: 2px 5px;
  margin-bottom: 8px;
}
.ant-input-status-error {
  border-color: var(--epac_red) !important; /* 修改边框颜色 */
  box-shadow: 0 0 3px #c7010e !important; /* 可选：添加蓝色阴影 */
}

/*  */

/* Check Box */
/* 选中时的背景和边框颜色 */
.ant-checkbox-checked .ant-checkbox-inner {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* 选中时的对勾（√）颜色 */
.ant-checkbox-checked .ant-checkbox-inner::after {
  border-color: white !important; /* 改变对勾的颜色 */
}

/* <a> link */
.legal-links a {
  color: var(--secondary);
  text-decoration: none; /* 默认不加下划线 */
  transition: color 0.3s ease-in-out;
}

.legal-links a:hover {
  color: #ff4500 !important; /* 悬停时变成橙色 */
  text-decoration: underline; /* 悬停时加下划线 */
}

/* Modal */
/* ✅ 让所有 Modal 的 OK 按钮变成绿色 */
.ant-modal .ant-btn-primary {
  background-color: var(--epac_green) !important;
  border-color: var(--epac_green) !important;
  color: white !important;
}

.ant-modal-close{
  top:16px !important;
  right:16px !important;
}

.ant-modal-body {
  scrollbar-width: auto;
  scrollbar-color: #ccc transparent;
}

.ant-modal-header {
  padding-bottom: 5px !important;
}

.ant-modal-title {
  font-size: 18px !important;
  font-weight: bold !important;
  color: var(--primary) !important;
}

.ant-modal .ant-btn-default {
  background-color: var(--epac_red) !important;
  border-color: var(--epac_red) !important;
  color: white !important;
}

/* button */
.ant-btn-default {
  font-weight: 500;
  /* background-color: #3b2f22!important;
  border-color: #3b2f22!important;
  color: white!important; */
}

.ant-btn-default:hover {
  /* background-color: #231b13!important;
  border-color: #231b13!important; */
}

.btn-accent {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: white !important;
}

/* table */


.ant-table-cell, .ant-table-thead > tr > th {
  padding: 8px 12px!important 
}
.ant-table-thead > tr > th {
  background-color: #685642!important ;
  color: #fff !important;
}
/* card */
.ant-card {
  border-radius: 13px;
}

:where(.css-dev-only-do-not-override-1nbco2g).ant-table-wrapper .ant-table-column-sorter{
  color: rgba(255, 255, 255, 0.293)!important ;
}
:where(.css-dev-only-do-not-override-1nbco2g).ant-table-wrapper .ant-table-column-sorter-up.active, :where(.css-dev-only-do-not-override-1nbco2g).ant-table-wrapper .ant-table-column-sorter-down.active {
  color: #f0f0f0!important ;
}
/* message */
.ant-message-notice {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* row */
:where(.css-dev-only-do-not-override-1nbco2g).ant-table-wrapper .ant-table-tbody .ant-table-row.ant-table-row-selected >.ant-table-cell {
  background-color: #ffe58f !important;  /* 你想要的背景色，比如淡黄色 */
}


/* steps */
/* 改变当前步骤的颜色 */
.ant-steps-item-process .ant-steps-item-icon {
  background-color: var(--accent) !important; /* 你想要的颜色 */
  border-color: var(--accent) !important;
}

/* 改变已完成步骤颜色 */
.ant-steps-item-finish .ant-steps-item-icon {
  background-color: var(--epac_green) !important;
  border-color: var(--epac_green) !important;
  color: #fff !important;
}

/* 改变步骤标题颜色 */
.ant-steps-item-process .ant-steps-item-title {
  color: var(--accent) !important;
}