/* 自定义字体 */
@font-face {
    font-family: "fusion-pixel-12px-proportional-zh_hans"; /* 自定义字体引用名称 */
    src: url('/upload/Font/fusion-pixel-12px-proportional-zh_hans.woff2'); /* 字体文件链接或路径 */
}

/* 全局字体设置 */
* {
    font-family: "fusion-pixel-12px-proportional-zh_hans" !important;
}

/* 折叠按钮样式 */
.collapsible {
    font-family: "fusion-pixel-12px-proportional-zh_hans" !important; /* 使用自定义字体 */
    font-weight: bold; /* 字体加粗 */
    color: #ffdd00; /* 字体颜色 */
    cursor: pointer; /* 鼠标指针样式 */
    padding-top: 8px; /* 上内边距 */
    padding-bottom: 8px; /* 下内边距 */
    padding-left: 12px; /* 左内边距 */
    padding-right: 25px; /* 右内边距 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 8px; /* 圆角 */
    background-color: transparent; /* 背景透明 */
    display: inline-block; /* 仅包裹内容 */
    position: relative; /* 相对定位 */
    margin-bottom: 5px; /* 底部间距 */
}

/* 折叠按钮的三角形图标 */
.collapsible::after {
    content: "▼"; /* 默认三角形 */
    font-size: 15px; /* 图标大小 */
    position: absolute; /* 绝对定位 */
    right: 5px; /* 距离右侧 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 垂直居中 */
    transition: transform 0.2s ease; /* 旋转动画 */
}

/* 折叠按钮激活状态 */
.collapsible.active::after {
    transform: translateY(-50%) rotate(180deg); /* 旋转 180 度 */
}

/* 折叠内容样式 */
.collapsible-content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    border: 1px solid #ccc; /* 内容边框 */
    border-radius: 8px; /* 圆角 */
    margin-top: 5px; /* 顶部间距 */
    background-color: transparent; /* 背景透明 */
}

/* 警告框样式 */
/* 警告框通用样式 */
.alert {
    padding: 12px 16px;
    border-radius: 6px;
    border-left: 4px solid transparent;
    margin: 10px 0;
    display: flex;
    align-items: center;
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
}

/* 图标样式 */
.alert-icon {
    font-size: 18px;
    margin-right: 12px;
}

/* 标题样式 */
.alert strong {
    font-weight: bold;
}

/* Note（提示） */
.alert-note {
    border-color: #6c757d;
    background-color: #f8f9fa;
}

.alert-note .alert-icon,
.alert-note strong {
    color: #6c757d;
}

/* Tip（建议） */
.alert-tip {
    border-color: #28a745;
    background-color: #e6f4ea;
}

.alert-tip .alert-icon,
.alert-tip strong {
    color: #28a745;
}

/* Important（重要） */
.alert-important {
    border-color: #007bff;
    background-color: #e9f5ff;
}

.alert-important .alert-icon,
.alert-important strong {
    color: #007bff;
}

/* Warning（警告） */
.alert-warning {
    border-color: #ffc107;
    background-color: #fff3cd;
}

.alert-warning .alert-icon,
.alert-warning strong {
    color: #ffc107;
}

/* Caution（注意） */
.alert-caution {
    border-color: #dc3545;
    background-color: #f8d7da;
}

.alert-caution .alert-icon,
.alert-caution strong {
    color: #dc3545;
}