/* 全局样式开始*/
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    color: #333;
}

/* 页面容器设置 */
.container {
    max-width: 1200px; /* 最大宽度限制 */
    margin: 0 auto;
    padding: 10px;
}

/* 导航栏样式 */
header {
    background-color: #022D46; /* 深灰色背景，与主题色形成对比 */
    padding: 10px 0;
    width: 100%; /* 背景全宽 */
}
.logo-desktop {
  border: 0;
}
nav {
    max-width: 1200px; /* 限制导航菜单的最大宽度 */
    margin: 0 auto; /* 居中对齐 */
    padding: 0 20px; /* 适当添加两边内边距 */
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start; /* 靠左对齐 */
    flex-wrap: wrap;
}

nav ul li {
    margin: 0 5px; /* 缩小按钮间的间距 */
}

nav ul li a {
    color: #ffffff;
    text-decoration: none;
    padding: 5px 8px; /* 缩小按钮的内边距 */
    display: block;
    font-weight: bold;
    transition: background-color 0.3s ease;
    font-size: 16px; /* 调整字体大小，使之更紧凑 */
}

nav ul li a:hover {
    background-color: #3281D0; /* 使用主题色作为悬停背景 */
    color: #ffffff; /* 保持文字为白色以确保可读性 */
    border-radius: 5px;
}

/* 二级菜单样式 */
nav ul li .dropdown-menu {
    display: none; /* 默认隐藏二级菜单 */
    position: absolute; /* 绝对定位，确保二级菜单显示在下方 */
    background-color: #022D46; /* 与主导航栏背景一致 */
    padding: 10px;
    list-style-type: none;
    margin: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    border-radius: 5px; /* 圆角 */
    z-index: 100; /* 确保其显示在前面 */
}

nav ul li:hover .dropdown-menu {
    display: block; /* 悬停时显示二级菜单 */
}

nav ul li .dropdown-menu li {
    margin: 5px 0; /* 二级菜单项目的间距 */
}

nav ul li .dropdown-menu li a {
    color: #ffffff;
    padding: 5px 8px;
    font-size: 14px; /* 缩小二级菜单字体大小 */
    display: block;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

nav ul li .dropdown-menu li a:hover {
    background-color: #3281D0;
    color: #ffffff;
    border-radius: 3px;
}

/* 模拟用户按钮样式 */
.simulate_user {
    background-color: #3281D0;
    color: #ffffff;
    padding: 5px 8px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: block;
    width: 100%; /* 确保按钮宽度与链接一致 */
    text-align: left; /* 让按钮的文字左对齐，像普通导航项 */
}

.simulate_user:hover {
    background-color: #2A6BA0; 
    color: #ffffff;
    border-radius: 3px;
}

/* 响应式设计 */
@media (max-width: 800px) {
	nav {
		padding: 0;
	}
    nav ul {
        justify-content: flex-start;
        padding: 0 10px;
        overflow-x: auto;
    }

    nav ul li {
        margin: 3px 3px; /* 进一步减少按钮间距 */
    }

    nav ul li a {
        padding: 4px 6px; /* 缩小内边距 */
        font-size: 14px; /* 缩小字体以适应手机屏幕 */
    }
}

@media (max-width: 480px) {
  .logo-desktop {
    display: none;
  }
}

h2 {
    text-align: center;
}

h3 a {
    font-size: 18px;
    margin: 0px;
    color: #3281D0;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* 通用文本显示 */
p {
    text-align: center;
}

p a, .footabout a {
    color: #3281D0;
    text-decoration: none;
}

p a:hover, .footabout a:hover {
    text-decoration: underline;
}

.footabout {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* 设置元素之间的间距为10px */
    padding: 0px; /* 添加一些上下内边距 */
    flex-wrap: wrap; /* 如果屏幕宽度不足时，可以让内容换行 */
    text-align: center;
}

.foot-button {
    display: flex;
    align-items: center;
    text-decoration: none;
    border: 1px solid #ddd; /* 增加边框 */
    padding: 5px 5px; /* 调整按钮的内边距 */
    border-radius: 5px;
    transition: border-color 0.3s ease;
}

.foot-button:hover {
    border-color: #3281D0;
}

.foot-button img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

.foot-button span {
    font-size: 14px;
    color: #3281D0;
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}
#qrcode-link {
	color: white; /* 设置链接文字为白色 */
	text-decoration: none; /* 取消默认的下划线 */
}
#qrcode-link:hover {
	text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/* 帮助按钮弹出层 */
.helpBtn {
	padding: 0px 0px;	
	background-color: transparent; /* 设置背景色为透明 */
	cursor: pointer;
	border: none;
	font-size: 14px;
}
#helppopup {
	display: none;
	position: fixed;
	text-align: left;
	font-size: 15px;	
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
	background-color: white;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	border-radius: 8px;
	z-index: 1000;
	width: 80%;
}
#helppopup p {
	text-align: left;
}
/* 当屏幕宽度大于768px时，设置固定宽度500px */
@media (min-width: 768px) {
	#helppopup {
		width: 500px;
	}
}
#helpoverlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 500;
}
#helpcloseBtn {
	display: block;
	margin-top: 10px;
	padding: 4px 8px;
	background-color: #3281D0;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
/* 全局样式结束*/

/* 登录和注册页面样式 */
.loginreg {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.loginreg h2 {
    text-align: center;
    margin-bottom: 20px;
}

.tab-links {
    text-align: center;
    margin-bottom: 20px;
}

.tab-links a {
    display: inline-block;
    padding: 10px 20px;
    color: #3281D0;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 2px solid transparent;
}

.tab-links a.active {
    border-bottom: 2px solid #3281D0;
}

.tab-links a:hover {
    color: #0056b3;
    border-bottom: 2px solid #0056b3;
}


.error-message {
    color: #dc3545;
    text-align: center;
    margin-bottom: 20px;
}

.success-message {
    color: #008000;
    text-align: center;
    margin-bottom: 20px;
}
.success-message a,
.error-message a {
    color: #3281D0;
    text-decoration: none;
}

.success-message a:hover,
.error-message a:hover {
    text-decoration: underline;
}
.loginreg form div {
    margin-bottom: 15px;
    display: flex;
    align-items: center; /* 使label和输入框垂直居中 */
}

.loginreg label {
    width: 30%; /* 设置label宽度，使其与输入框保持同一行 */
    margin-bottom: 0; /* 移除底部默认的margin */
    font-weight: bold;
}

.loginreg select {
    padding: 10px;
	width:40px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    box-sizing: border-box;
	-webkit-appearance: none;
}



.loginreg input[type="text"],
.loginreg input[type="password"],
.loginreg input[type="email"],
.loginreg input[type="number"] {
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    box-sizing: border-box;
}

.loginreg input[type="text"],
.loginreg input[type="password"],
.loginreg input[type="email"] {
    width: 70%; /* 输入框占剩下的宽度 */
}

.phone input[type="number"] {
    width: 100%; /* 手机号，label下还有div */
}


.loginreg .phone,
.loginreg .verification-code {
    width: 70%; /* 输入框占剩下的宽度 */
    padding: 0 ; /* 设置所有内间距为0 */
    margin: 0 ; /* 设置所有外间距为0 */
}



.loginreg .verification-btn {
    padding: 0 ;
    width: 90px ;
    background-color: transparent ; 
    color: #3281D0 ; 
    border: none;
    cursor: pointer;
    font-size: 14px ;
    text-decoration: none; /* 去除下划线 */
    transition: color 0.3s ease;
}

.loginreg .verification-btn:hover {
    color: #2A6BA0;
    background-color: transparent ; 
    text-decoration: underline; /* 悬停时添加下划线 */
}


.loginreg button {
    width: 100%;
    padding: 10px;
    background-color: #3281D0;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.loginreg button:hover {
    background-color: #2A6BA0;
}


.g-recaptcha {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */  
}

/* 用户协议样式 */
#agree {
    margin-right: 5px;
	
}
#agree + a {
    color: #3281D0;
    text-decoration: none;
}

#agree + a:hover {
    text-decoration: underline;
}

/* 第三方登录标题样式 */
.third-party-login-title {
    text-align: center;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
}

.third-party-login-title::before,
.third-party-login-title::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background-color: #ddd;
}

.third-party-login-title::before {
    left: 0;
}

.third-party-login-title::after {
    right: 0;
}

/* 第三方登录按钮样式 */
.third-party-login {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.third-party-button {
    display: flex;
	text-decoration: none;
    align-items: center;
    border: 1px solid #ddd; /* 增加边框 */
    padding: 5px;
    border-radius: 5px;
    transition: border-color 0.3s ease;
}

.third-party-button:hover {
    border-color: #3281D0;
	text-decoration: none;
}

.third-button-fixed-100 {
    width: 100px; /* 用户中心页，限定宽度为 100px */
}

.third-button-fixed-130 {
    width: 130px; /* 用户中心页，限定宽度为 100px */
}

.third-party-buttons-container {
    display: flex;	/* 用户中心页,按钮同一行显示 */
    align-items: center;
    gap: 20px; /* 设置元素之间的间距为 20px */
}

.third-party-button img {
    width: 16px; /* 设置图标大小 */
    height: 16px;
    margin-right: 10px;
}

.third-party-button span {
    font-size: 14px;
    color: #3281D0;
	text-decoration: none;
}


/* 响应式设计 */
@media (max-width: 768px) {
    .loginreg {
        margin: 20px;
    }
}


/* 插入记录、编辑记录表单区域开始 */
.addpage, .editpage {
    width: 70%;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    /* 平板屏幕时的宽度调整 */
    .addpage, .editpage {
        width: 80%;
    }
}


/* 表单项布局 - 标签和输入框在同一行 */
.addpage .item, .editpage .item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.addpage .item label, .editpage .item label {
    min-width: 70px; /* 标签宽度，min-width实现标签文字对齐 */
    margin-right: 10px;
    font-weight: bold;
}

/* 文本框样式设置 */
.addpage input[type="text"], .addpage input[type="number"],
.editpage input[type="text"], .editpage input[type="number"],
.addpage input[type="date"], .editpage input[type="date"],
.addpage input[type="file"], .editpage input[type="file"],
.addpage textarea, .editpage textarea {
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    box-sizing: border-box;
    width: 40%; /* 默认文本框宽度 */
}

/* 去掉数字文本框的小箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield; /* Hide number input controls */
}

/* 文本框只读时的样式 */
.addpage input[readonly], .editpage input[readonly], .addpage textarea[readonly], .editpage textarea[readonly] {
    background-color: #e9ecef;
}

/* 多行文本框的调整 */
.addpage textarea, .editpage textarea {
    resize: both; /* 允许横纵向都调整 */
    min-height: 12em; /* 默认显示12行 */
}

/* 单选框组的布局 */
.addpage input[type="radio"], .editpage input[type="radio"] {
    margin-left: 10px;
    margin-right: 5px;
}

/* 多选框组的布局调整，仅适用于.addpage和.editpage下的#kline_levels */
.addpage #kline_levels, .editpage #kline_levels {
    display: flex;
    flex-wrap: wrap;
    max-width: 500px; /* 宽度控制 */
}

.addpage #kline_levels label, .editpage #kline_levels label {
    display: inline-flex;
    align-items: center;
    margin-right: 5px; /* 缩小选项之间的间距 */
    margin-bottom: 10px; /* 换行时的底部间距 */
}

.addpage #kline_levels input[type="checkbox"], .editpage #kline_levels input[type="checkbox"] {
    margin-right: 5px; /* 缩小选框与文字之间的间距 */
}

/* 提示信息样式 */
.notes {
    background-color: #fff3cd;
    color: #856404;
    padding: 10px;
    border: 1px solid #ffeeba;
    border-radius: 5px;
    margin-top: 15px;
    font-size: 14px;
}

/* 按钮样式 */
.itembtn {
    text-align: right;
    margin-top: 20px;
}
.itembtn button {
    padding: 10px 20px;
    background-color: #3281D0;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.itembtn button:hover {
    background-color: #2A6BA0;
}

.delete-button {
    margin-left: 15px;
    padding: 10px 20px; /* 使内边距与按钮一致 */
    background-color: #dc3545;
    color: #ffffff;
    border: none; /* 去掉边框 */
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    display: inline-block; /* 使其与按钮显示一致 */
    transition: background-color 0.3s ease;
}

.delete-button:hover {
    background-color: #c82333;
    text-decoration: none; /* 保持无下划线 */
}

/* 下载附件按钮 */
.download-file {
    padding: 5px 10px; /* 与按钮一致的内边距 */
    background-color: #3281D0; /* 默认按钮的背景色 */
    color: #ffffff; /* 文字颜色 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 鼠标悬停时的指针样式 */
    font-size: 14px; /* 字体大小 */
    text-decoration: none; /* 去掉下划线 */
    display: inline-block; /* 使其与按钮一致 */
    margin-right: 10px; /* 与右侧保持一定间距 */
    transition: background-color 0.3s ease; /* 背景颜色的渐变效果 */
}

.download-file:hover {
    background-color: #2A6BA0; /* 鼠标悬停时的背景色 */
    text-decoration: none; /* 保持无下划线 */
}


/* 删除图片附件按钮 */
.delete-img,
.delete-file {
    padding: 5px 10px; /* 与按钮一致的内边距 */
    background-color: #dc3545; /* 默认按钮的背景色 */
    color: #ffffff; /* 文字颜色 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 鼠标悬停时的指针样式 */
    font-size: 14px; /* 字体大小 */
    text-decoration: none; /* 去掉下划线 */
    display: inline-block; /* 使其与按钮一致 */
    margin-right: 10px; /* 与右侧保持一定间距 */
    transition: background-color 0.3s ease; /* 背景颜色的渐变效果 */
}

.delete-img:hover,
.delete-file:hover {
    background-color: #c82333; /* 鼠标悬停时的背景色 */
    text-decoration: none; /* 保持无下划线 */
}


/* 超链接按钮样式 */
.button-link {
    padding: 5px 10px; /* 与按钮一致的内边距 */
    background-color: #3281D0; /* 默认按钮的背景色 */
    color: #ffffff; /* 文字颜色 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 鼠标悬停时的指针样式 */
    font-size: 14px; /* 字体大小 */
    text-decoration: none; /* 去掉下划线 */
    display: inline-block; /* 使其与按钮一致 */
    margin-left: 10px; /* 与文本框保持一定间距 */
    transition: background-color 0.3s ease; /* 背景颜色的渐变效果 */
}

.button-link:hover {
    background-color: #2A6BA0; /* 鼠标悬停时的背景色 */
    text-decoration: none; /* 保持无下划线 */
}


/* 响应式设计 - 手机屏幕优化 */
@media (max-width: 480px) {
	
    /* 手机屏幕时宽度调整 */
    .addpage, .editpage {
        width: 90%;
        padding: 15px;
    }

    .addpage .item label, .editpage .item label {
		max-width: 60px;
        margin-bottom: 5px;
    }

	/* 文本框样式设置 */
	.addpage input[type="text"], .addpage input[type="number"], 
	.editpage input[type="text"], .editpage input[type="number"],
	.addpage input[type="date"], .editpage input[type="date"],
	.addpage input[type="file"], .editpage input[type="file"],
	.addpage textarea, .editpage textarea {
		padding: 8px;
		border: 1px solid #ced4da;
		border-radius: 5px;
		box-sizing: border-box;
		width: 90%; /* 默认文本框宽度 */
	}	
    .stock-input {
        width: 160px !important;; /* 编辑页手机屏股票名称宽度 */
    }

    .button-link {
        padding: 3px 4px; /* 缩小内边距 */
        font-size: 12px; /* 缩小字体大小 */
        border-radius: 4px; /* 调整圆角大小 */
    }

	/* 单选框组的布局 */
	.addpage input[type="radio"], .editpage input[type="radio"] {
		margin-left: 5px;
		margin-right: 1px;
	}
	
	
	
}


/* 插入记录、编辑记录表单区域结束 */



/* 模态框开始 */
.modal {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
}

.modal-dialog {
    position: relative;
    margin: 10% auto;
    max-width: 500px;
    width: 90%;
}

.modal-content {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.modal-header, .modal-body, .modal-footer {
    padding: 15px;
}

.modal-header {
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.modal-header .close {
    border: none;
    background: none;
    font-size: 24px;
    color: #333;
    cursor: pointer;
}

.modal-body p {
    margin: 10px 0;
    font-size: 16px;
    color: #555;
}

.modal-body .form-group {
    display: flex;
    align-items: center;
    justify-content: center; /* 水平居中对齐整个表单项 */
    margin-bottom: 15px;
}

.modal-body label {
    margin-right: 10px; /* 增加 label 与输入框之间的间距 */
    margin-bottom: 0;   /* 取消底部间距，以便和 input 垂直居中 */
    font-size: 14px;
    font-weight: 500;
    color: #333;
    width: 20%; /* 设置 label 的宽度 */
    text-align: right; /* label 文本靠右对齐 */
}

.modal-body input[type="text"],
.modal-body input[type="number"],
.modal-body input[type="date"],
.modal-body input[type="password"],
.modal-body select,
.modal-body select[multiple] {
    width: 50%; /* 输入框宽度 */
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}




.modal-footer {
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
}

.modal-footer .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.modal-footer .btn-primary {
    background-color: #3281D0;
    color: #ffffff;
    margin-right: 10px;
    transition: background-color 0.3s ease;
}

.modal-footer .btn-primary:hover {
    background-color: #2A6BA0;
}

.modal-footer .btn-secondary {
    background-color: #6c757d;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

.modal-footer .btn-secondary:hover {
    background-color: #5a6268;
}
/* 模态框结束 */

/* 用户页开始 */

.userpage {
	margin: 0 0;
	background-color: #ffffff;
	padding: 20px;
	border: 1px solid #ced4da;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.userpage p{
	text-align: left; 
}



/* 表单项布局 - 标签和输入框在同一行 */
.userpage .item  {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.userpage .item label {
    min-width: 70px; /* 标签宽度，min-width实现标签文字对齐 */
    margin-right: 10px;
    font-weight: bold;
}


/* 文本框样式设置 */
.userpage input,
.userpage textarea {
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    box-sizing: border-box;
    width: 40%; /* 默认文本框宽度 */
}

/* 文本框只读时的样式 */
.userpage input[readonly] {
    background-color: #e9ecef;
}


/* 布局样式 */
.layout {
	display: flex;
	gap: 20px;
}

.sidebar {
	width: 15%;
	background-color: #e9ecef;
	border-radius: 8px;
	padding: 15px;
}

.sidebar a {
	display: block;
	padding: 10px;
	margin-bottom: 10px;
	background-color: #f8f9fa;
	border-radius: 5px;
	color: #3281D0;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.sidebar a:hover {
	background-color: #3281D0;
	color: #fff;
}

.content {
	width: 100%;
}

/* 卡片容器样式 */
.usercard-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* 卡片样式 */
.usercard {
    width: calc(30% - 20px);
    height: 350px;
    background-color: #ffffff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    position: relative; /* 新增：设置相对定位 */
    display: flex; /* 新增：使用Flex布局 */
    flex-direction: column; /* 新增：子元素垂直排列 */
    justify-content: space-between; /* 新增：子元素在主轴方向上分散对齐 */
}

.usercard:hover {
    transform: translateY(-5px);
}

.usercard h3 {
    margin-top: 0;
    font-size: 18px;
}

.usercard .price {
    font-size: 30px;
    height: 70px;
    font-weight: bold;
    color: #3281D0; /* 蓝色调 */
    background-color: #f2f2f2; /* 淡灰色背景 */
    padding: 0 0;
    text-align: center;
    margin: 10px 0;
    line-height: 60px; /* 使文字垂直居中 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

.usercard p {
    font-size: 14px;
    color: #6c757d;
}
.payimg img {
    max-width: 400px; /* 普通屏幕下最大宽度 */
    width: 100%;
}
/* 按钮样式 */

.userbtn {
    margin-top: 20px;
	text-align: center;
}
.userbtn button {
    padding: 10px 20px;
    background-color: #3281D0;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.userbtn button:hover {
    background-color: #2A6BA0;
}


.user-mincard button {
    width: 90px; 
    padding: 10px 10px; /* 增加水平内边距 */
    background-color: #3281D0; 
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    align-self: right; 
    margin-left: 20px; /* 增加按钮与其他内容的间距 */
}

.user-mincard button:hover {
    background-color: #2A6BA0;
}
/* payimg 按钮样式 */
.userpage .payimg button {
    background-color: #dc3545;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.userpage .payimg button:hover {
    background-color: #c82333; 
}

/* 用户稍小卡片样式 */
.user-mincard {
    width: 70%; /* 调整为全宽 */
    margin: 20px auto; /* 水平居中 */
    background-color: #ffffff;
    padding: 20px; /* 增加内边距以适应全宽布局 */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.user-mincard:hover {
    transform: translateY(-5px);
}

.user-mincard h3 {
    margin-top: 0;
    font-size: 20px; /* 增加标题字体大小 */
}

.user-mincard p {
    font-size: 16px; /* 增加段落字体大小 */
    color: #495057;
    margin-bottom: 15px; /* 增加段落之间的间距 */
}

.userpagetable {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: space-between; /* 子元素之间的间距平均分布 */
}


/* 表格内按钮基本样式 */
.userpagetable .button {
    display: inline-block;
    padding: 3px 4px; /* 按钮内边距 */
    margin: 3px; /* 按钮之间的间距 */
    font-size: 14px; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    text-decoration: none; /* 无下划线 */
    color: white; /* 字体颜色 */
    border: none; /* 无边框 */
    border-radius: 3px; /* 圆角边框 */
    cursor: pointer; /* 鼠标悬停时显示手形图标 */
    transition: background-color 0.3s ease; /* 背景色渐变效果 */
}


.userpagetable .pay-button {
    background-color: #3281D0;
}

.userpagetable .delete-button {
    background-color: #dc3545; 
}
/* 图片默认样式 */
.item img {
	width: 120px;
	border-radius: 5px; /* 圆角效果 */
	cursor: pointer; /* 鼠标悬浮时变成手型 */
	border: 2px solid transparent; /* 初始无边框 */
	transition: border 0.3s; /* 添加平滑的边框变化效果 */
}

/* 鼠标悬浮时的效果 */
.item img:hover {
	border: 2px solid #BBB; /* 悬浮时显示浅灰色边框 */
}

/* 选中的图片增加边框 */
input[type="radio"]:checked + label img {
	border: 2px solid #3281D0; /* 选中时显示边框 */
}
.phone-item,
.email-item {
	display: flex; /* 使用flex布局 */
	align-items: center; /* 垂直居中对齐 */
	gap: 0px; /* 设置元素之间的间距 */
	margin-bottom: 10px;
}

.phone-item .phone-label,
.email-item .email-label {
	min-width: 70px;
	font-weight: bold; /* 标签加粗 */
	margin-right: 10px; /* 标签与下拉菜单之间的间距 */
}
.phone-item .country-select {
	width: 36px; /* 设置下拉菜单的宽度为36px */
	padding: 8px;
	border: 1px solid #ced4da;
	border-radius: 5px;
	box-sizing: border-box;
	-webkit-appearance: none; /* 移除iOS默认样式 */
}

/* 为了确保下拉菜单和输入框在同一行 */
.phone-input-group,
.email-input-group {
	display: flex;
	align-items: center;
	flex-grow: 1; /* 让包裹容器占据剩余空间 */
}

/* 手机屏幕适配 */
@media (max-width: 800px) {
	.layout {
		flex-direction: column;
	}

	.sidebar {
		width: 100%;
		padding: 0;
		margin: 0;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		background-color: #022D46; /* 背景颜色 */
	}



	.sidebar a {
		color: #ffffff;
		text-decoration: none;
		padding: 5px 3px; /* 缩小按钮的内边距 */
		display: block;
		margin: 2px 2px;
		font-weight: bold;
		background-color: #022D46;		
		font-size: 14px;
		text-align: center;
		flex: 1;
	}

	.sidebar a:hover {
		background-color: #3281D0; /* 使用主题色作为悬停背景 */
		color: #ffffff; /* 保持文字为白色以确保可读性 */
		border-radius: 5px;
	}

    .userpage input, 
    .userpage select, 
    .userpage textarea {
        width: 100%; /* 占据剩余宽度 */
    }
	
    .payimg img {
        max-width: 270px; /* 手机屏幕下最大宽度 */
    }
	
	.content {
		width: 100%;
	}

	.usercard {
		width: 95%;
	}
	
	.user-mincard {
		width: 85%;
	}
	
	.user-mincard button {
		padding: 5px 5px; /* 水平内边距 */
		margin-left: 5px; /* 按钮与其他内容的间距 */
	}




}


/* 用户页结束 */


/* 筛选类表单区开始 */

.filters {
    width: 80%;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.filters-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    margin-right: 20px;
}

.filters-item label {
    margin-right: 10px;
    font-weight: bold;
}

.filters-item input[type="text"],
.filters-item input[type="number"] {
    width: 160px;
}

.filters-item input[type="date"] {
    width: 120px;
}

.filters-item input[type="text"],
.filters-item input[type="date"],
.filters-item input[type="number"] {
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    box-sizing: border-box;
}

.filters-item input[type="radio"],
.filters-item input[type="checkbox"] {
    margin-right: 5px; /* 与标签保持一致的间距 */
    margin-top: 2px; /* 调整单选框的位置，使其垂直居中对齐 */
}


.filters-item input[type="radio"]:focus {
    outline: none; /* 移除默认的轮廓 */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* 添加蓝色边框阴影 */
}

.filters button {
    padding: 5px 20px;
    height: 36px; /* 使其与输入框的高度一致 */
    line-height: 20px; /* 调整为与文本框内容高度一致 */
    background-color: #3281D0;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}
.filters button:hover {
    background-color: #2A6BA0;
}


.export-button {
    padding: 0 20px;
    height: 36px; 
    line-height: 36px; /* 调整为与文本框内容高度一致 */
    background-color: #f8f9fa; /* 淡雅的素色背景 */
    color: #333; /* 深灰色文本，确保良好的可读性 */
    border: 1px solid #ced4da; /* 与输入框一致的边框 */
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.3s ease;
	margin-left: 10px; /* 增加左边距 */
	margin-right: 10px;
}

.export-button:hover {
    background-color: #e2e6ea; /* 稍深的背景色用于悬停状态 */
    color: #000; /* 鼠标悬停时，文本颜色加深 */
    border-color: #adb5bd; /* 鼠标悬停时，边框颜色变深 */
}

.export-button:active {
    background-color: #dae0e5; /* 更深的背景色用于点击状态 */
    color: #000;
    border-color: #b6b9bc; /* 点击状态的边框颜色 */
}

.filters-item select,
.item select {
    width: 160px; /* 设置与文本框一致的宽度 */
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: #ffffff;
    appearance: none; /* 移除浏览器默认的下拉箭头 */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMiAxMiIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE1Ij48cGF0aCBkPSJNMiA0bDYgNiA2LTZ6IiBmaWxsPSIjY2VkNGRhIi8+PC9zdmc+'); /* 添加自定义的下拉箭头 */
    background-repeat: no-repeat;
    background-position: right 10px center; /* 调整箭头的位置 */
    background-size: 12px; /* 设置箭头的大小 */
}





@media (max-width: 768px) {
    .filters {
        width: 80%;
        justify-content: flex-start;
    }

  .filters-item a {
    order: 1; /* 将导出按钮放在筛选按钮前面 */
  }

  .filters-item button {
    order: 2; /* 将筛选按钮放在导出按钮后面 */
  }
}

@media (max-width: 480px) {
    .filters {
        width: 95%;
        flex-direction: column;
    }

    .filters-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        width: 90%;
    }

    .filters-item label {
        width: 80px; /* 固定标签文字宽度 */
        margin-right: 10px;
    }

    .filters-item input[type="text"],
    .filters-item input[type="date"],
    .filters-item input[type="number"]	{
        flex-grow: 1; /* 输入框占据剩余宽度 */
        width: calc(90% - 90px); /* 计算剩余宽度，90px = 80px标签宽度 + 10px间距 */
        max-width: 90%;
    }
    
    .filters-item input[type="radio"],
	.filters-item input[type="checkbox"] {
        margin-right: 5px; /* 调整单选框、多选框的间距 */
    }

    .filters button	{
        padding: 8px 16px;
        margin-left: auto;
        width: auto;
        display: block;
        margin-bottom: 10px; /* 增加下边距 */
    }
	
	.export-button{
    padding: 0px 16px;
	margin-bottom: 10px; 
	}	
	
	#filters_checkbox { /* 筛选页的多选框 */
		display: flex;
		width:75%;
		flex-wrap: wrap;
	}
    #filters_checkbox label {
        margin-right: 2px;
        margin-bottom: 2px;
        width:65px;
    }
	
}


/* 筛选类表单区结束 */


/* 表格单元格内的悬停信息显示开始 */
.hover-info {
    position: relative;
    cursor: pointer;
}

.hover-info .popup {
    display: none;
    position: absolute; /* 相对于.hover-info定位 */
    text-align: left;
    top: 100%; /* 将popup放置在.hover-info的下方 */
    right: 0; /* 将popup靠右对齐 */
    margin-top: 5px; /* 与父元素保持一定间隔 */
    background-color: #ffffff;
    padding: 5px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    white-space: pre-wrap;  /* 支持回车换行 */
    min-width: 380px; /* 修改最小宽度为 380px */
    text-align: left;
    overflow: auto; /* 添加滚动条以便多行文本显示 */
}

/* 悬停或点击显示 popup */
.hover-info:hover .popup,
.hover-info.active .popup {
    display: block;
}

.hover-info .popup p {
    margin: 0;
    font-size: 14px;
    color: #333;
}

.hover-info .popup a:hover {
    text-decoration: none;
}

.hover-info .popup img {
    margin-top: 10px;
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.hover-info .popup p,
.hover-info .popup span,
.hover-info .popup div {
    text-align: left; /* 如果 popup 内部有多个元素，确保它们的内容也居左对齐 */
}
/* 响应式调整 */
@media (max-width: 768px) {
    .hover-info .popup {
        position: fixed; /* 使用 fixed 定位以保持在屏幕中央 */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* 移动 popup 到屏幕中心 */
        right: auto; /* 重置 right 属性 */
        min-width: initial; /* 重置最小宽度 */
        width: 90%; /* 调整宽度以适应移动设备 */
        max-width: 400px; /* 可以设置一个最大宽度限制，或者使用 initial 重置 */
    }
}
/* 表格单元格内的悬停信息显示结束 */



/* 表格样式开始 */

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

table th, table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

table th {
    background-color: #f2f2f2;
}

table tr:hover {
    background-color: #f5f5f5;
}

table tfoot {
    background-color: #f2f2f2;
    font-weight: bold;
}

table tfoot td {
    padding: 10px;
    border-top: 1px solid #ddd;
    text-align: left;
}

table.admintable {
  font-size: 14px; /* 设置文字大小为14px */
}
table.admintable input[readonly] {
  background-color: #EEEEEE; 
  border: none; 
}


/* 限制样式仅应用于 .table-container 内的表格 */
.table-container a {
    color: #3281D0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.table-container a:hover {
    color: #2A6BA0;
    text-decoration: underline;
}

/* 编辑按钮样式 */
.table-container .edit-button {
    padding: 5px 5px;
	font-size:14px;
    background-color: #3281D0;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.table-container .edit-button:hover {
    background-color: #2A6BA0;
    text-decoration: none;
    color: #ffffff;
}

/* 删除按钮样式 */
.table-container .delete-button {
    margin-left: 0px;
    padding: 5px 5px;
	font-size:14px;
    background-color: #dc3545;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.table-container .delete-button:hover {
    background-color: #c82333;
    text-decoration: none;
    color: #ffffff;
}

/** 持仓记录的合计数 **/
.totals {
    margin-top: 10px;
    display: flex;
    flex-direction: column; /* 子元素垂直排列 */
}

.totals .total-profit-loss {
    display: flex; /* 使总盈亏额与其他项在同一行 */
    align-items: left; /* 垂直居中对齐 */
    margin-bottom: 5px; /* 保留一定的间距 */
}

.totals .total-profit,
.totals .total-loss {
    display: inline-flex; /* 使盈利和亏损在同一行 */
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 10px; 
    margin-left: 16px; /* 盈利和亏损之间的缩进 */
}

/* 在手机屏幕下将表格适配为卡片样式 */
@media (max-width: 480px) {	
    .table.table-bordered {
        background-color: #ffffff;
        border: 1px solid #ced4da;
        border-radius: 6px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        padding: 7px;
        margin-bottom: 20px;
    }
	
    table tfoot, table tfoot tr, table tfoot td {
        display: block;
    }

    /* 隐藏表头 */
    thead tr {
        display: none;
    }

    /* 卡片样式 */
    tbody tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* 每个数据项用 before 显示表头 */
    td {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        border: none;
        position: relative;
    }

    td::before {
        content: attr(data-label);
        font-weight: bold;
        text-transform: capitalize;
        color: #333;
    }

    td:last-child {
        margin-bottom: 0;
    }

    /* 隐藏水平滚动条 */
    table {
        overflow-x: hidden;
    }

    table tfoot td {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        border-top: 1px solid #ddd;
    }

    table tfoot td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #333;
    }
}
/* 表格样式结束 */

/* 分页区域样式开始 */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination a {
    color: #3281D0;
    padding: 8px 16px;
    margin: 0 4px;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination a:hover {
    background-color: #f5f5f5;
    color: #2A6BA0;
}

.pagination a.active {
    background-color: #3281D0;
    color: #ffffff;
    border-color: #3281D0;
}

.pagination a.disabled {
    pointer-events: none;
    color: #ddd;
    border-color: #ddd;
}

/* 在手机屏幕下适配分页区域 */
@media (max-width: 480px) {
    .pagination {
        flex-wrap: wrap; /* 允许分页链接在小屏幕上换行 */
        padding: 0 10px; /* 调整内边距 */
        justify-content: flex-start; /* 让分页项在小屏幕上靠左对齐 */
    }

    .pagination a {
        flex: 1 1 auto; /* 允许分页项根据内容自适应宽度 */
        text-align: center;
        padding: 6px 6px; /* 缩小内边距 */
        margin: 4px; /* 缩小间距 */
    }

    .pagination a:not(.active) {
        margin-bottom: 6px; /* 增加非活动项的底部间距 */
    }


}
/* 分页区域样式结束 */

/* 标签样式 */
.tab-container {
    display: flex;
    cursor: pointer;
    margin-bottom: 20px;
}
.tab {
    padding: 10px 20px;
    background: #f1f1f1;
    border: 1px solid #ccc;
    margin-right: 5px;
    transition: background 0.3s;
}
.tab.active {
    background: #3281D0;
    color: white;
    border-bottom: 2px solid white;
}

.chart-container {
    max-width: 600px; /* 设置最大宽度为600px */
    width: 100%; /* 确保div宽度为100%，但不超过最大宽度 */
	margin: auto; /* 水平居中 */
}

/* 内容区域样式 */
.tab-content {
    display: none;
    border: 1px solid #ccc;
    padding: 20px;
}
.tab-content.active {
    display: block;
}
@media (max-width: 480px) {
    .tab {
        padding: 8px 10px; /* 减少内边距以适应小屏幕 */
        font-size: 14px; /* 调整字体大小 */
        margin-right: 3px; /* 减少标签间的间距 */
        flex-basis: 100%; /* 让每个标签在一行显示 */
		text-align: center;
    }

    .tab.active {
        border-bottom: none; /* 移除激活标签的底部边框，在小屏幕上更美观 */
    }
}

/* 瀑布流区开始 */

.memo-feed {
    display: block; /* 由于Masonry将会处理布局，直接使用block */
    max-width: 1200px;
    margin: 0 auto;
}

.memo-card {
    width: 32%; /* 每行3个卡片，保持原来的宽度 */
    margin-bottom: 15px;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.memo-card:hover {
    transform: translateY(-5px); /* 卡片悬停时上移 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.memo-header {
    display: flex;
    justify-content: space-between; /* 将标题和状态分布在两侧 */
    align-items: center; /* 垂直居中对齐标题和状态 */
    margin-bottom: 10px; /* 标题和下方内容之间的间距 */
}

.memo-title {
    margin: 0; /* 清除默认外边距 */
    font-size: 18px; /* 根据需要调整标题的字体大小 */
}

.memo-stock-status {
    font-size: 14px; /* 根据需要调整状态的字体大小 */
    color: #3281D0; /* 状态文字颜色 */
}

.memo-stock-status span {
    display: inline-block; /* 使状态文字能够正确对齐 */
}


.memo-card p {
    margin: 5px 0;
    line-height: 1.6;
    color: #333;
	text-align: left;
}


.memo-image img {
    max-width: 100%; /* 图片适应卡片宽度 */
    border-radius: 5px; /* 圆角图片 */
    margin-top: 10px; /* 图片和文本之间的间距 */
}

/* 按钮基本样式 */
.memo-card .button {
    display: inline-block;
    padding: 8px 15px; /* 按钮内边距 */
    margin: 5px; /* 按钮之间的间距 */
    font-size: 14px; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    text-decoration: none; /* 无下划线 */
    color: white; /* 字体颜色 */
    border: none; /* 无边框 */
    border-radius: 4px; /* 圆角边框 */
    cursor: pointer; /* 鼠标悬停时显示手形图标 */
    transition: background-color 0.3s ease; /* 背景色渐变效果 */
}

.memo-card .memo-actions {
    display: flex; /* 启用Flexbox布局 ，删除编辑按钮靠右对齐*/
    justify-content: flex-end; /* 将子元素靠容器的末端对齐 */
    align-items: center; /* 如果需要，可以垂直居中对齐子元素 */
}

/* 下载附件按钮样式 */
.memo-card .down-button {
    background-color: #3281D0; /* 按钮背景色 */
}

/* 编辑按钮样式 */
.memo-card .edit-button {
    background-color: #3281D0; 
    padding: 4px 6px; /* 按钮内边距 */
}

/* 删除按钮样式 */
.memo-card .delete-button {
    background-color: #dc3545; 
    padding: 4px 6px; /* 按钮内边距 */
    color: #ffffff; /* 文字颜色 */
}

/* 按钮悬停效果 */
.memo-card .button:hover {
    opacity: 0.9; /* 鼠标悬停时透明度降低 */
}

.normalbtn {
    padding: 8px 20px;
    background-color: #3281D0;
    color: #ffffff;
    border: none;
    text-decoration: none; /* 去掉下划线 */
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.normalbtn:hover {
    background-color: #2A6BA0; /* 鼠标悬停时的背景色 */
    text-decoration: none; /* 保持无下划线 */
}


/* 响应式设计 */
@media (max-width: 768px) {
    .memo-card {
        width: calc(50% - 30px); /* 在小屏幕上设置为两列布局 */
    }
}

@media (max-width: 480px) {
    .memo-card {
        width: 100%; /* 在更小的屏幕上设置为单列布局 */
    }
}